/*
 * Videos and Articles (page-videos-and-articles.php)
 * Section styles for template-parts/insights/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, header and footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * Every section sits in .container--wide (1686px of content) with a 1584px
 * inner measure, which puts the content edges on the design's 168px margins.
 */

.insights-inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
}

/* Page-local card fill; no global token uses this grey. */
.insights-blogs,
.insights-videos {
  --insights-card: #f4f4f4;
}

/* Rule + label lockup, used in place of the .tag ribbon on this page */
.insights-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.insights-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.insights-hero {
  background: var(--c-white);
  /* 81 above the illustration and 78 below it, which is the whole of the
     comp's 681 section once the 522 art is in it. The copy is shorter than
     the art, so the grid's centring places it. */
  padding-block: clamp(1.75rem, calc(4.2188 * var(--vw)), 5.0625rem) clamp(1.5rem, calc(4.0625 * var(--vw)), 4.875rem);
}
.insights-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  /* 640 / 138 / 806 on the comp's 1584 measure — a narrow copy column beside a
     large illustration, which is this hero's whole idea and why its art is the
     one that does not sit back at 1644 with the rest. */
  grid-template-columns: minmax(0, 640fr) minmax(0, 806fr);
  align-items: center;
  column-gap: 8.712%;
  row-gap: clamp(2rem, calc(3 * var(--vw)), 3.5rem);
}
.insights-hero__title {
  margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
  max-width: 9em;
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.insights-hero__title .accent {
  color: var(--c-orange);
}
.insights-hero__deck {
  margin-top: clamp(1rem, calc(1.72 * var(--vw)), 2.0625rem);
  max-width: min(640px, calc(33.3333 * var(--vw-inset)));
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.insights-hero__art {
  /* The one hero the comp treats differently: a much larger illustration run
     flush to the container edge rather than back at the shared 1644. The art
     column bounds it here, so the comp width is documentation, not a cap. */
  --hero-art-w: 806;
  --hero-art-inset: 0;
}

/* ==========================================================================
   Section jump tabs
   ========================================================================== */

/* The header and the tab bar both stay pinned to the top of the viewport for
   the whole page: the header at the very top, the tabs parked directly under
   it. The tabs' offset is the header's measured height, which main.js writes
   into --drx-header-h (the header grows and shrinks with the viewport, so it
   cannot be a fixed number). The values below approximate those heights so the
   bars still line up before — or without — that script. */
:root {
  --drx-header-h: clamp(6.25rem, calc(8.4 * var(--vw)), 11.5rem);
  --drx-tabs-h: clamp(3.5rem, calc(4.5 * var(--vw)), 5rem);
}
.site-header {
  position: sticky;
  top: 0;
}
.insights-tabs {
  position: sticky;
  top: var(--drx-header-h);
  z-index: 90; /* under .site-header's 100, so nothing rides over the header */
  background: var(--c-white);
  border-block: 1px solid var(--c-charcoal);
}
/* A tab jump parks the section's top edge flush under the two pinned bars.
   Any margin on top of that shows a band of the section above it under the
   tab bar, and since neighbouring sections differ in background it reads as
   a stray stripe rather than breathing room. */
.insights-section {
  scroll-margin-top: calc(var(--drx-header-h) + var(--drx-tabs-h));
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.insights-tabs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, calc(3.28 * var(--vw)), 3.9375rem);
  max-width: var(--measure-wide);
  margin-inline: auto;
}
.insights-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding-block: clamp(0.75rem, calc(0.73 * var(--vw)), 0.876rem);
  border-bottom: 2px solid transparent;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
  transition: color 0.2s ease;
}
.insights-tab__label {
  font-weight: 700;
}
.insights-tab:hover {
  color: var(--c-orange);
}
.insights-tab.is-active {
  border-bottom-color: var(--c-orange);
}
.insights-tab.is-active .insights-tab__label {
  color: var(--c-orange);
}

/* ==========================================================================
   Featured item
   ========================================================================== */
.insights-featured {
  background: var(--c-white);
  padding-top: clamp(2.5rem, calc(4.9 * var(--vw)), 5.875rem);
}
.insights-featured__card {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 777fr) minmax(0, 806fr);
  border: 2px solid var(--c-charcoal);
  border-radius: min(41px, calc(2.1354 * var(--vw-inset)));
  background: var(--c-white);
  overflow: hidden;
}
.insights-featured__art {
  /* `contain` (not `cover`) so a graphic with its headline baked into the
     image — e.g. the "Prescriptions Shouldn't Come with a Side of
     Frustration" card — is never cropped by the art panel's aspect ratio;
     the panel's own white background (matching the graphic's) fills any
     letterboxed edge seamlessly. */
  background: var(--c-white) center / contain no-repeat;
  min-height: clamp(220px, calc(20 * var(--vw)), 380px);
}
.insights-featured__copy {
  padding: clamp(1.75rem, calc(3.44 * var(--vw)), 4.125rem) clamp(1.5rem, calc(2.24 * var(--vw)), 2.6875rem)
    clamp(2rem, calc(5.68 * var(--vw)), 6.8125rem) clamp(1.5rem, calc(2.76 * var(--vw)), 3.3125rem);
}
.insights-featured__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, calc(0.78 * var(--vw)), 0.9375rem);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.32;
  text-transform: uppercase;
  color: var(--c-charcoal);
}
.insights-featured__chip {
  border-radius: min(17px, calc(0.8854 * var(--vw-inset)));
  background: var(--c-cream);
  padding: clamp(0.25rem, calc(0.36 * var(--vw)), 0.4375rem) clamp(0.875rem, calc(1.35 * var(--vw)), 1.625rem);
}
.insights-featured__headline {
  margin-top: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.32;
  color: var(--c-charcoal);
}
.insights-featured__deck {
  margin-top: clamp(1rem, calc(1.67 * var(--vw)), 2rem);
  font-size: var(--fs-body);
  line-height: 1.79;
  color: var(--c-charcoal);
}
.insights-featured__btn {
  margin-top: clamp(1.5rem, calc(2.03 * var(--vw)), 2.4375rem);
  min-width: clamp(220px, calc(15.83 * var(--vw)), 304px);
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Shared section head (Blogs / Podcast / Videos / Library)
   ========================================================================== */
.insights-section__number {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-orange);
}
.insights-section__title {
  margin-top: clamp(0.5rem, calc(0.83 * var(--vw)), 1rem);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-charcoal);
}
.insights-section__row {
  margin-top: clamp(0.75rem, calc(1.3 * var(--vw)), 1.5625rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, calc(1.5 * var(--vw)), 2rem);
  align-items: baseline;
  justify-content: space-between;
}
.insights-section__deck {
  max-width: min(779px, calc(40.5729 * var(--vw-inset)));
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-charcoal);
}
.insights-section__link {
  flex: 0 0 auto;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-blue);
  transition: filter 0.2s ease;
}
.insights-section__link:hover {
  filter: brightness(1.2);
}

/* ==========================================================================
   Blogs
   ========================================================================== */
.insights-blogs {
  background: var(--c-white);
  padding-block: clamp(3.25rem, calc(8.02 * var(--vw)), 9.624rem) clamp(2rem, calc(4.84 * var(--vw)), 5.808rem);
}
.insights-blogs__grid {
  margin-top: clamp(2rem, calc(4.06 * var(--vw)), 4.875rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, calc(3.65 * var(--vw)), 4.375rem) clamp(1rem, calc(1.51 * var(--vw)), 1.8125rem);
}
.insights-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(280px, calc(18.54 * var(--vw)), 356px);
  border: 1px solid rgba(57, 57, 57, 0.5);
  border-radius: min(22px, calc(1.1458 * var(--vw-inset)));
  background: var(--insights-card);
  padding: clamp(1.25rem, calc(1.93 * var(--vw)), 2.3125rem) clamp(1.25rem, calc(2.24 * var(--vw)), 2.6875rem)
    clamp(1rem, calc(1.35 * var(--vw)), 1.625rem);
}
.insights-card__chip {
  border-radius: min(7px, calc(0.3646 * var(--vw-inset)));
  background: var(--c-ice);
  padding: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem) clamp(0.5rem, calc(0.66 * var(--vw)), 0.8125rem);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-blue);
}
.insights-card__title {
  margin-top: clamp(0.5rem, calc(0.68 * var(--vw)), 0.8125rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.insights-card__title a:hover {
  color: var(--c-blue);
}
.insights-card__deck {
  margin-top: clamp(0.25rem, calc(0.42 * var(--vw)), 0.5rem);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--c-charcoal);
}
.insights-card__meta {
  margin-top: auto;
  padding-top: clamp(0.75rem, calc(1.2 * var(--vw)), 1.4375rem);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--c-charcoal);
}
.insights-blogs__empty {
  margin-top: clamp(2rem, calc(4.06 * var(--vw)), 4.875rem);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-grey);
}

/* ==========================================================================
   Full Disclosure Podcast
   ========================================================================== */
.insights-podcast {
  --insights-thumb: #d9d9d9; /* Page-local placeholder-tile grey; no global token uses it. */
  background: var(--c-ice);
  padding-block: clamp(2.25rem, calc(5.57 * var(--vw)), 6.684rem) clamp(2.5rem, calc(5.94 * var(--vw)), 7.128rem);
}
.insights-podcast__layout {
  margin-top: clamp(2rem, calc(3.44 * var(--vw)), 4.125rem);
  display: grid;
  /* 509 / 965 on the comp's 1584 measure — a fixed cover card beside the
     episode list, same idea as the hero's copy/art split. */
  grid-template-columns: minmax(0, 509fr) minmax(0, 965fr);
  column-gap: 6.57%; /* 104 of 1584 */
  align-items: start;
}

/* Cover card: artwork on top, subscribe copy below. Same border/radius the
   blog cards use. */
.insights-podcast__card {
  border: 1px solid rgba(57, 57, 57, 0.5);
  border-radius: min(22px, calc(1.1458 * var(--vw-inset)));
  background: var(--c-white);
  overflow: hidden;
}
.insights-podcast__cover {
  display: block;
  width: 100%;
  aspect-ratio: 509 / 347;
  object-fit: cover;
}
.insights-podcast__note {
  padding: clamp(1.25rem, calc(1.51 * var(--vw)), 1.8125rem) clamp(1.5rem, calc(2.29 * var(--vw)), 2.75rem)
    clamp(2rem, calc(4.11 * var(--vw)), 4.9375rem);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-charcoal);
}
.insights-podcast__note p + p {
  margin-top: clamp(0.5rem, calc(0.75 * var(--vw)), 0.9375rem);
}
.insights-podcast__subscribe {
  display: inline-block;
  margin-top: clamp(0.5rem, calc(0.75 * var(--vw)), 0.9375rem);
  font-weight: 700;
  color: var(--c-blue);
}
.insights-podcast__subscribe:hover {
  filter: brightness(1.2);
}

/* Episode list: a divider above the first row and below every row — same
   trick as .insights-library__list / .insights-item. */
.insights-podcast__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(57, 57, 57, 0.35);
}
.insights-episode {
  display: grid;
  grid-template-columns: minmax(0, 590fr) minmax(0, 334fr);
  column-gap: 4.25%; /* 41 of 965 */
  align-items: center;
  border-bottom: 1px solid rgba(57, 57, 57, 0.35);
  padding-block: clamp(1.5rem, calc(2.4 * var(--vw)), 2.875rem);
}
.insights-episode__label {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-orange);
}
.insights-episode__title {
  margin-top: clamp(0.75rem, calc(1.35 * var(--vw)), 1.625rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.insights-episode__title a:hover {
  color: var(--c-blue);
}
.insights-episode__body {
  margin-top: clamp(1rem, calc(1.82 * var(--vw)), 2.1875rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.insights-episode__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 334 / 210;
  border-radius: min(25px, calc(1.3021 * var(--vw-inset)));
  overflow: hidden;
  background: var(--insights-thumb);
}
.insights-episode__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.insights-episode__play {
  position: relative;
  width: clamp(40px, calc(3.33 * var(--vw)), 64px);
  height: auto;
  transition: transform var(--motion) ease;
}
.insights-episode__thumb:hover .insights-episode__play {
  transform: scale(1.06);
}
/* ==========================================================================
   Explainer videos
   ========================================================================== */
.insights-videos {
  background: var(--c-navy);
  color: var(--c-white);
  padding-block: clamp(2.5rem, calc(6.09 * var(--vw)), 7.308rem) clamp(0.75rem, calc(2.03 * var(--vw)), 2.436rem);
}
.insights-videos .insights-section__title,
.insights-videos .insights-section__deck {
  color: var(--insights-card);
}
.insights-videos .insights-section__link {
  color: var(--insights-card);
}
.insights-videos__grid {
  margin-top: clamp(2rem, calc(4.06 * var(--vw)), 4.875rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, calc(2.81 * var(--vw)), 3.375rem);
}
.insights-video {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-orange);
  border-radius: min(31px, calc(1.6146 * var(--vw-inset)));
  overflow: hidden;
}
.insights-video__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 492 / 238;
  background: var(--c-blue);
}
.insights-video__thumb img:not(.insights-video__play),
.insights-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.insights-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Transparent so the design's blue panel shows through before the first
     frame is decoded, and behind any letterboxing. */
  background: transparent;
}
.insights-video__play {
  position: relative;
  width: clamp(64px, calc(5.78 * var(--vw)), 111px);
  height: auto;
  transition: transform 0.2s ease;
}
.insights-video__thumb:hover .insights-video__play {
  transform: scale(1.06);
}
.insights-video__copy {
  padding: clamp(1.25rem, calc(1.56 * var(--vw)), 1.875rem) clamp(1.25rem, calc(1.82 * var(--vw)), 2.1875rem)
    clamp(1.25rem, calc(1.61 * var(--vw)), 1.9375rem);
}
.insights-video__chip {
  border-radius: min(7px, calc(0.3646 * var(--vw-inset)));
  background: var(--c-cream);
  padding: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem) clamp(0.5rem, calc(0.66 * var(--vw)), 0.8125rem);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-orange);
}
.insights-video__title {
  margin-top: clamp(0.75rem, calc(1.25 * var(--vw)), 1.5rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-white);
}
.insights-video__title a:hover {
  color: var(--c-sky);
}
.insights-video__body {
  margin-top: clamp(0.25rem, calc(0.42 * var(--vw)), 0.5rem);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-white);
}
.insights-video__date {
  margin-top: clamp(0.75rem, calc(1.25 * var(--vw)), 1.5rem);
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--c-white);
}

/* ==========================================================================
   White papers, news and webinars
   ========================================================================== */
.insights-library {
  background: var(--c-white);
  padding-block: clamp(1.75rem, calc(4.38 * var(--vw)), 5.256rem);
}
.insights-library__list {
  margin: clamp(2rem, calc(3.02 * var(--vw)), 3.625rem) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(57, 57, 57, 0.35);
}
/* Same grid-area trick as the episodes: the action sits on the title row. */
.insights-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1rem, calc(2 * var(--vw)), 3rem);
  border-top: 1px solid rgba(57, 57, 57, 0.35);
  padding-block: clamp(1rem, calc(2.19 * var(--vw)), 2.628rem);
}
.insights-item__chip {
  grid-area: 1 / 1;
  justify-self: start;
  min-width: clamp(180px, calc(13.7 * var(--vw)), 263px);
  border-radius: min(7px, calc(0.3646 * var(--vw-inset)));
  background: var(--c-ice);
  padding: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem) clamp(0.5rem, calc(0.73 * var(--vw)), 0.875rem);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-blue);
}
.insights-item__title {
  grid-area: 2 / 1;
  margin-top: clamp(0.75rem, calc(1.25 * var(--vw)), 1.5rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.insights-item__title a:hover {
  color: var(--c-blue);
}
.insights-item__body {
  grid-area: 3 / 1;
  margin-top: clamp(0.5rem, calc(1.09 * var(--vw)), 1.3125rem);
  max-width: min(856px, calc(44.5833 * var(--vw-inset)));
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-charcoal);
}
.insights-item__meta {
  grid-area: 4 / 1;
  margin-top: clamp(0.75rem, calc(1.67 * var(--vw)), 2rem);
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--c-charcoal);
}
.insights-item__action {
  grid-area: 2 / 2;
  align-self: center;
  justify-self: end;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-blue);
  white-space: nowrap;
}
.insights-item__action:hover {
  filter: brightness(1.2);
}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.insights-newsletter {
  background: var(--c-ice);
  padding-block: clamp(2rem, calc(5.31 * var(--vw)), 6.372rem);
}
.insights-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 942fr) minmax(0, 568fr);
  column-gap: 4.67%; /* 74 of 1584 */
  align-items: center;
}
.insights-newsletter__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-charcoal);
}
.insights-newsletter__deck {
  margin-top: clamp(0.5rem, calc(0.94 * var(--vw)), 1.125rem);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-charcoal);
}
.insights-newsletter__form {
  display: grid;
  grid-template-columns: minmax(0, 383fr) minmax(0, 173fr);
  gap: clamp(0.5rem, calc(0.63 * var(--vw)), 0.75rem);
}
.insights-newsletter__input {
  min-height: clamp(56px, calc(3.8 * var(--vw)), 73px);
  border: 1px solid var(--c-sky);
  border-radius: min(15px, calc(0.7812 * var(--vw-inset)));
  background: var(--c-white);
  padding-inline: clamp(1rem, calc(1.46 * var(--vw)), 1.75rem);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  color: var(--c-charcoal);
}
.insights-newsletter__input::placeholder {
  color: var(--c-grey);
}
.insights-newsletter__input:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 1px;
}
.insights-newsletter__submit {
  min-height: clamp(56px, calc(3.8 * var(--vw)), 73px);
  border: 0;
  border-radius: min(15px, calc(0.7812 * var(--vw-inset)));
  background: var(--c-sky);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--c-white);
  cursor: pointer;
  transition: filter 0.2s ease;
}
.insights-newsletter__submit:hover {
  filter: brightness(1.08);
}

/* Constant Contact's inline form, rebuilt as the row above. Its stylesheet
   dresses the form as a white card with a stacked label, input and full-width
   button; each rule here leads with .insights-newsletter__ctct so it outranks
   Constant Contact's own selectors (div.ctct-form-embed form.ctct-form-custom
   …) and the per-form colours it injects, whatever order they load in. The
   form should be email-only in Constant Contact — any extra field it grows
   drops onto a row of its own under the email. */
/* Constant Contact's consent line makes the form taller than the copy beside
   it; centred, the heading would sink to meet the middle of that text. Both
   columns hang from the top instead, the email row level with the heading. */
.insights-newsletter__inner--ctct {
  align-items: start;
}
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults {
  background: transparent;
  border-radius: 0;
  padding: 0;
  font: inherit;
  color: var(--c-charcoal);
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom {
  display: grid;
  grid-template-columns: minmax(0, 383fr) minmax(0, 173fr);
  gap: clamp(0.5rem, calc(0.63 * var(--vw)), 0.75rem);
  align-items: start;
  min-height: 0;
}
/* The section's own heading and deck already say what this is. */
.insights-newsletter__ctct form.ctct-form-custom h2.ctct-form-header,
.insights-newsletter__ctct form.ctct-form-custom p.ctct-form-text {
  display: none;
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom > * {
  grid-column: 1 / -1;
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom div.ctct-form-field {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom div.ctct-form-field:first-of-type {
  grid-column: 1;
  grid-row: 1;
}
/* The placeholder names the field, as on the theme's own form; the label
   stays for screen readers. */
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom label.ctct-form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Field errors sit under the input, so a message never pushes the input out
   of line with the button. */
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom div.ctct-form-field .ctct-form-errorMessage {
  order: 2;
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom input.ctct-form-element {
  height: auto;
  min-height: clamp(56px, calc(3.8 * var(--vw)), 73px);
  border: 1px solid var(--c-sky);
  border-radius: min(15px, calc(0.7812 * var(--vw-inset)));
  background: var(--c-white);
  box-shadow: none;
  padding: 0 clamp(1rem, calc(1.46 * var(--vw)), 1.75rem);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: normal;
  color: var(--c-charcoal);
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom input.ctct-form-element::placeholder {
  color: var(--c-grey);
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom input.ctct-form-element:focus {
  outline: 2px solid var(--c-blue);
  outline-offset: 1px;
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom button.ctct-form-button,
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom button.ctct-form-button:hover,
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom button.ctct-form-button:active {
  grid-column: 2;
  grid-row: 1;
  min-height: clamp(56px, calc(3.8 * var(--vw)), 73px);
  margin: 0;
  border: 0;
  border-radius: min(15px, calc(0.7812 * var(--vw-inset)));
  background: var(--c-sky);
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-white);
  transition: filter 0.2s ease;
}
.insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom button.ctct-form-button:hover {
  filter: brightness(1.08);
}
/* Constant Contact's consent line has to stay with the form; it runs quietly
   under the row instead of as the card's footnote. */
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text {
  margin: 0;
  font: 0.75rem/1.5 var(--font-sans);
  color: var(--c-grey);
}
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text a.ctct-form-footer-link,
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults p.ctct-gdpr-text a.ctct-form-footer-privacy-link {
  color: inherit;
}
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults p.ctct-form-footer {
  padding-top: 0.5rem;
  text-align: left;
}
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults div.ctct-form-success {
  min-height: 0;
}
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults div.ctct-form-success h2.ctct-form-header {
  margin: 0 0 0.375rem;
  font: 700 var(--fs-h6)/1.2 var(--font-sans);
  color: var(--c-charcoal);
}
.insights-newsletter__ctct div.ctct-form-embed div.ctct-form-defaults div.ctct-form-success p.ctct-form-text {
  margin: 0;
  font: var(--fs-ui)/1.4 var(--font-sans);
  color: var(--c-charcoal);
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.insights-cta {
  background: var(--c-navy);
  color: var(--c-white);
  padding-block: clamp(2rem, calc(4.74 * var(--vw)), 5.688rem) clamp(1.75rem, calc(4.58 * var(--vw)), 5.496rem);
}
.insights-cta__grid {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 733fr) minmax(0, 410fr);
  column-gap: 15.46%; /* 209 of 1352 */
  align-items: start;
}
.insights-cta__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.48;
}
.insights-cta__heading .accent {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  color: var(--c-orange);
}
.insights-cta__body {
  margin-top: clamp(0.5rem, calc(0.68 * var(--vw)), 0.8125rem);
  max-width: min(585px, calc(30.4688 * var(--vw-inset)));
  font-size: var(--fs-body);
  line-height: 1.56;
}
.insights-cta__actions {
  padding-top: clamp(0rem, calc(1.51 * var(--vw)), 1.8125rem);
}
.insights-cta__btn {
  width: 100%;
  max-width: min(249px, calc(12.9688 * var(--vw-inset)));
  text-transform: uppercase;
  text-decoration: underline;
}
.insights-cta__contact {
  margin-top: clamp(1rem, calc(1.41 * var(--vw)), 1.6875rem);
  font-size: var(--fs-body);
  line-height: 1.81;
}
.insights-cta__contact a {
  font-weight: 700;
  text-decoration: underline;
}
.insights-cta__contact a:hover {
  color: var(--c-sky);
}
.insights-cta__email {
  display: block;
}

/* ==========================================================================
   Motion — scroll reveal + hover treatments
   Mirrors the home page: reveal targets open their transition list with
   var(--reveal-transition) so the scroll-in and the hover state share one
   declaration instead of the second replacing the first. See .audience-card /
   .savings-card in front-page.css for the pattern this follows.
   ========================================================================== */
.insights-hero__copy,
.insights-hero__art,
.insights-featured__art,
.insights-featured__copy,
.insights-section__title,
.insights-section__row,
.insights-episode,
.insights-item,
.insights-newsletter__copy,
.insights-newsletter__form,
.insights-newsletter__ctct,
.insights-cta__copy,
.insights-cta__actions {
  transition: var(--reveal-transition);
}

/* Blog cards lift like .savings-card; they are not themselves links, so only
   the title answers a direct hover, but the whole tile still rises to meet
   the cursor. */
.insights-card {
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    border-color var(--motion) ease,
    box-shadow var(--motion) ease;
}
.insights-card:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-blue);
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.13);
}

/* Explainer video tiles: the whole card lifts and its border brightens, the
   still zooms and the play badge grows a little more than its own thumb-only
   hover already gives it — same language as .audience-card's media zoom. */
.insights-video {
  transition:
    transform var(--motion) ease,
    border-color var(--motion) ease,
    box-shadow var(--motion) ease;
}
.insights-video:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-sky);
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(0, 15, 23, 0.35);
}
.insights-video__thumb {
  transition: var(--reveal-transition);
}
.insights-video__thumb img:not(.insights-video__play),
.insights-video__poster,
.insights-video__media {
  transition: transform var(--motion) ease;
}
.insights-video:hover .insights-video__thumb img:not(.insights-video__play),
.insights-video:hover .insights-video__poster,
.insights-video:hover .insights-video__media {
  transform: scale(1.05);
}
.insights-video:hover .insights-video__play {
  transform: scale(1.06);
}

/* A visitor who has asked for reduced motion still gets the feedback, just
   not the movement: colour, border and shadow changes stay, only what
   travels or scales is dropped. The scroll reveals are already handled at the
   source — drx_reveal_flag() never arms them. See front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .insights-card:hover,
  .insights-video:hover,
  .insights-video:hover .insights-video__thumb img:not(.insights-video__play),
  .insights-video:hover .insights-video__poster,
  .insights-video:hover .insights-video__media,
  .insights-video:hover .insights-video__play {
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .insights-blogs__grid,
  .insights-videos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .insights-hero__inner,
  .insights-featured__card,
  .insights-newsletter__inner,
  .insights-cta__grid,
  .insights-podcast__layout {
    grid-template-columns: 1fr;
    row-gap: clamp(1.75rem, calc(4 * var(--vw)), 3rem);
  }
  .insights-hero__art {
    order: 2;
    max-width: 520px;
  }
  .insights-featured__art {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .insights-cta__actions {
    padding-top: 0;
  }
  .insights-podcast__card {
    max-width: 509px;
  }
  /* Thumbnail reads better under the copy than squeezed beside it once the
     row can no longer spare 334px for it. */
  .insights-episode {
    grid-template-columns: 1fr;
    row-gap: clamp(1rem, calc(1.5 * var(--vw)), 1.5rem);
  }
  .insights-episode__thumb {
    max-width: 334px;
  }
  /* Stacked, the trailing link reads better under the copy than beside it */
  .insights-item {
    grid-template-columns: 1fr;
  }
  .insights-item__title {
    grid-area: auto;
  }
  .insights-item__chip,
  .insights-item__body,
  .insights-item__meta,
  .insights-item__action {
    grid-area: auto;
  }
  .insights-item__action {
    justify-self: start;
    margin-top: clamp(0.75rem, calc(2 * var(--vw)), 1.25rem);
  }
  /* Swipe the tabs sideways rather than wrap them — a wrapped second row would
     double the height of the strip that stays pinned to the top. */
  .insights-tabs__list {
    gap: 0 clamp(1rem, calc(3 * var(--vw)), 2rem);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Fades the trailing edge toward transparent instead of a hard crop, so
       the strip reads as "swipe for more" rather than cut-off text. Right
       edge only: the strip starts scrolled to the first tab, where nothing
       is hidden that direction, so a matching left fade would just dim a
       fully-visible tab for no reason. Same technique as
       .audience-switcher__list in style.css. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
  }
  .insights-tabs__list::-webkit-scrollbar {
    display: none;
  }
  .insights-tab {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .insights-blogs__grid,
  .insights-videos__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .insights-newsletter__form,
  .insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom {
    grid-template-columns: 1fr;
  }
  .insights-newsletter__ctct div.ctct-form-embed form.ctct-form-custom button.ctct-form-button {
    grid-column: 1;
    grid-row: 2;
  }
  .insights-featured__card,
  .insights-video,
  .insights-podcast__card {
    border-radius: 20px;
  }
  .insights-tab {
    font-size: var(--fs-ui);
  }
}