/* ==========================================================================
   Case Study v2 (Phase 2 design) - single template styling.
   Hand-maintained (no build step). Values extracted from Figma
   f0b5ZoYx5ImO6acRcdJNv2 node 2391:110; tokens shared with phase2.css.
   ========================================================================== */
/* app.css sets Oswald on h1-h5 and Lato on body; re-assert the Phase 2 font
   (Aeonik) across the whole template: inheritance from the root wrapper plus
   an explicit heading override to beat app.css's `h1, h2, ...` rule. */
.csv2 {
  font-family: var(--p2-font);
}

.csv2 h1,
.csv2 h2,
.csv2 h3,
.csv2 h4,
.csv2 h5,
.csv2 h6 {
  font-family: var(--p2-font);
}

/* Keyboard focus: app.css globally resets `a:focus, button:focus { outline: 0 }`
   (WCAG 2.4.7 failure). Re-establish a visible indicator for keyboard users
   across the whole template, without affecting mouse clicks (:focus-visible). */
.csv2 a:focus-visible,
.csv2 button:focus-visible,
.csv2 summary:focus-visible {
  outline: 2px solid #058eff !important;
  outline-offset: 2px;
}

/* No Phase 2 vertical guide rails on this template (header-v2.css draws them
   on every header-v2 page via body.header-v2-page .wrap::before/::after). */
body.case-studies-template-case-study-v2 .wrap::before,
body.case-studies-template-case-study-v2 .wrap::after {
  display: none;
}

/* ==========================================================================
   Reading progress bar: fixed strip at the very top of the viewport, filled
   via scaleX (compositor-only), with the percentage pill riding the tip.
   ========================================================================== */
.csv2-progress {
  position: fixed;
  top: 0; /* runtime: the script pins it to the fixed header's bottom edge */
  left: 0;
  right: 0;
  height: 4px;
  z-index: 99; /* just under the header (100) so its dropdowns cover the pill */
  pointer-events: none;
  font-family: var(--p2-font);
}

.csv2-progress__bar {
  height: 100%;
  background-color: #0088f7;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.csv2-progress__label {
  position: absolute;
  top: 8px;
  left: 24px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 9px;
  background-color: #0088f7;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.csv2-progress.is-active .csv2-progress__label {
  opacity: 1;
}

.csv2-article {
  display: grid;
  grid-template-columns: 294px minmax(0, 766px);
  justify-content: space-between;
  /* margin, NOT padding: .p2-w-content (also on this element) forces
     `padding: 0 !important`, so a padding-top can never apply. */
  margin-top: 96px;
}

/* Minimum separation between the aside and the main column: space-between
   collapses to zero once the container is narrower than 294+766, and the
   plain `gap` is killed by .p2-w-content's `gap: 0 !important` - the extra
   ancestor + !important wins on specificity. */
.csv2 .csv2-article {
  column-gap: 32px !important;
}

/* ==========================================================================
   Hero (Task 5). Figma f0b5ZoYx5ImO6acRcdJNv2 node 2391:112.
   Desktop only (1440); responsive breakpoints land in Task 12.
   ========================================================================== */
.csv2-hero {
  position: relative;
  overflow: hidden;
  /* Horizontal containment/centering is owned by .p2-w-content on .csv2-hero__inner
     (matches Figma's 105px side inset at 1440); only vertical padding lives here. */
  padding: 140px 0 96px;
  /* Per-case-study brand color (ACF csv2_hero_color via inline --csv2-hero-bg);
     navy is the design default (Figma navy vs purple #8B3DB6 colorways).
     !important: the hero is a <header>, so the Customizer widget CSS
     `body header { background/border/box-shadow !important }` hits it too —
     same armor pattern as header-v2.css; relax once that widget CSS is deleted. */
  background-color: var(--csv2-hero-bg, var(--p2-navy)) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: #fff;
  font-family: var(--p2-font);
}

/* Photo layer (ACF csv2_hero_image via inline --csv2-hero-img). Opacity below 1
   blends the photo into the brand color, as in the purple Figma colorway (0.6). */
.csv2-hero::before {
  content: '';
  display: block; /* Customizer widget CSS hides generic `body header` pseudos */
  position: absolute;
  inset: 0;
  background-image: var(--csv2-hero-img, none);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: var(--csv2-hero-img-opacity, 1);
  pointer-events: none;
}

/* Dark scrim over the photo (or the flat color fallback) so text stays legible.
   Same gradient in both Figma colorways. */
.csv2-hero::after {
  content: '';
  display: block; /* beats the Customizer `body header::after { display: none }` */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 60, 116, 0.1) 24%, rgb(15, 41, 91) 85%);
  pointer-events: none;
}

.csv2-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'crumb crumb'
    'title logo'
    'subtitle logo'
    'cta logo'
    'stats stats';
  /* NOTE: .p2-w-content forces `gap: 0 !important` (phase2.css, loaded after
     this file, same specificity, so it wins on source order) - vertical
     rhythm below is done with margins instead of grid gap. */
}

.csv2-hero__crumb {
  grid-area: crumb;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.csv2-hero__crumb a {
  color: #fff;
  text-decoration: none;
}

.csv2-hero__crumb a:hover {
  text-decoration: underline;
}

/* Separator: 12px bright-blue arrow SVG (Figma group 2055248964, #66A5F1). */
.csv2-hero__crumb-sep {
  display: inline-flex;
}

.csv2-hero__crumb-sep svg {
  display: block;
  width: 12px;
  height: 12px;
}

.csv2-hero__title {
  grid-area: title;
  max-width: 600px;
  margin: 0 0 32px;
  font-size: 40px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.5px;
  color: #fff;
}

.csv2-hero__subtitle {
  grid-area: subtitle;
  max-width: 620px;
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
}

.csv2-hero__logo {
  grid-area: logo;
  align-self: end;
  justify-self: end;
  height: 34px;
  width: auto;
}

/* Video-variant CTA (Figma 6088:18814): blue pill with a play badge that
   jumps to the player and starts it. Sits where the subtitle row ends. */
.csv2-hero__video-cta {
  grid-area: cta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px 12px 12px;
  border: 0;
  border-radius: 36px;
  background-color: #0088f7;
  color: #fff;
  font-family: var(--p2-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.csv2-hero__video-cta:hover {
  background-color: #0470cc;
}

.csv2-hero__video-cta-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff;
}

.csv2-hero__video-cta-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #0088f7;
}

.csv2-hero__stats {
  grid-area: stats;
  display: grid;
  /* 1fr max, not 400px: auto-fit counts tracks by a definite max, so
     minmax(280px, 400px) collapsed to 2 columns below 1248. With 1fr the
     count comes from the 280 min and tracks stretch - exactly 400px each
     at the 1248 content cap, same as the Figma. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.csv2-stat__link {
  position: relative; /* anchor for the absolute .csv2-stat__arrow */
  display: flex;
  /* Stacked layout (client round 2026-07-29, Lisa's request): the value on
     top, the label underneath, so pills absorb varying label lengths across
     case studies. Replaces the centered/baseline pairing from the 2026-07-22
     round (the hero alignPills script is gone with it). */
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 24px;
  border-radius: 20px;
  /* Glass treatment measured off the Figma render: baby-blue 10% fill,
     1px baby-blue 40% border, background blur. */
  background-color: rgba(192, 220, 251, 0.1);
  border: 1px solid rgba(192, 220, 251, 0.4);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #fff;
  text-decoration: none;
}

/* Neutralize app.css's global `a:hover { color: blue }` - the pill is an
   anchor (the down arrow smooth-scrolls to the article) but must not read as
   a text link. No hover state exists in the Figma. */
.csv2-stat__link:hover,
.csv2-stat__link:focus {
  color: #fff;
}

.csv2-stat__value {
  font-size: 40px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  padding-right: 36px; /* keep long values clear of the absolute top-right arrow */
}

.csv2-stat__label {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

/* 24px white arrow icon pinned to the card's top-right corner (Figma frame
   2147239167: 12px from the top, 18px from the right at the 400px card width). */
.csv2-stat__arrow {
  position: absolute;
  top: 12px;
  right: 18px;
}

.csv2-stat__arrow svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   Aside: data sheet, buttons, share (Task 6). Figma f0b5ZoYx5ImO6acRcdJNv2
   node 2391:155 (data sheet + buttons), node 2391:183 (share row).
   Desktop only (1440); responsive breakpoints land in Task 12.
   ========================================================================== */
.csv2-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  font-family: var(--p2-font);
}

.csv2-aside__logo {
  height: 34px;
  width: auto;
}

.csv2-aside__sheet {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.csv2-aside__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--p2-border-blue);
}

.csv2-aside__label {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--p2-navy);
}

.csv2-aside__value {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--p2-navy);
}

/* The Figma links data-sheet values out (ERP page, module pages) with a
   plain underline in the same navy. */
.csv2-aside__value a {
  color: inherit;
  text-decoration: underline;
}

.csv2-aside__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.csv2-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 24px;
  border-radius: 6px;
  font-family: var(--p2-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.csv2-btn--primary {
  background-color: #058eff;
  color: #fff;
  border: none;
}

.csv2-btn--primary:hover {
  background-color: #0470cc;
}

.csv2-btn--outline {
  background-color: #fff;
  color: var(--p2-navy);
  border: 1px solid var(--p2-border-blue);
}

.csv2-btn--outline:hover {
  background-color: var(--p2-bg-light);
}

.csv2-share {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.csv2-share__title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--p2-navy);
}

.csv2-share__list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The Figma share icons are complete 35px circle SVGs (navy circle + white
   glyph), used as-is; hover/copied states recolor the circle inside the SVG.
   The ::after overlay extends the hit area to 45px (WCAG 2.5.8) without
   changing the 35px visual. */
.csv2-share__link {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.csv2-share__link::after {
  content: '';
  position: absolute;
  inset: -5px;
}

.csv2-share__link svg {
  display: block;
  width: 35px;
  height: 35px;
}

.csv2-share__link svg circle {
  transition: fill 0.15s ease;
}

.csv2-share__link:hover svg circle {
  fill: var(--p2-slate);
}

/* Transient "copied" confirmation state on the copy-link button. */
.csv2-share__copy.is-copied svg circle {
  fill: #1fa971;
}

/* ==========================================================================
   Opening quote + optional video (Task 7).
   Plain variant: file f0b5ZoYx5ImO6acRcdJNv2 node 2391:205 (large centered
   navy quote, no video set). Card + video variant: file
   7nu40yObBAdMAEBuCj6HMf node 6088:18899 (light-blue rounded quote card with
   avatar, above a 16:9 click-to-load player).
   Desktop only (1440); responsive breakpoints land in Task 12.
   ========================================================================== */
.csv2-opening {
  margin: 0;
  font-family: var(--p2-font);
}

.csv2-opening__text {
  margin: 0;
  color: var(--p2-navy);
}

.csv2-opening__avatar {
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.csv2-opening__by {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.csv2-opening__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--p2-navy);
}

/* Linked name (LinkedIn): navy underline, no blue link color (Figma 2391:454). */
a.csv2-opening__name,
a.csv2-opening__name:hover {
  color: var(--p2-navy);
  text-decoration: underline;
}

.csv2-opening__role {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--p2-navy);
}

/* Plain variant: node 2391:205/206. Column stack, centered attribution row. */
.csv2-opening--plain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.csv2-opening--plain .csv2-opening__text {
  font-size: 32px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.5px;
  text-align: center;
}

.csv2-opening--plain .csv2-opening__by {
  justify-content: center;
  flex-wrap: wrap;
}

.csv2-opening--plain .csv2-opening__avatar {
  width: 32px;
  height: 32px;
}

/* Card variant: node 6088:18900. Grid so the avatar spans both text rows
   without an extra markup wrapper around quote + attribution. Defaults to a
   single column (the avatar <img> only renders when the ACF field is set,
   see opening.php); the two-column layout only kicks in when an avatar is
   actually present, so a card with no avatar doesn't reserve a blank gutter. */
.csv2-opening--card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  column-gap: 32px;
  row-gap: 16px;
  align-items: center;
  width: 100%;
  padding: 40px;
  border: 1px solid #c0dcfb; /* Brand Pallette/Baby blue, distinct from --p2-border-blue */
  border-radius: 20px;
  background-color: rgba(192, 220, 251, 0.2);
  box-sizing: border-box;
}

.csv2-opening--card:has(.csv2-opening__avatar) {
  grid-template-columns: 112px 1fr;
}

.csv2-opening--card .csv2-opening__avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 112px;
  height: 112px;
  border: 1px solid #c0dcfb;
}

.csv2-opening--card .csv2-opening__text {
  grid-column: 1;
  grid-row: 1;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
}

.csv2-opening--card .csv2-opening__by {
  grid-column: 1;
  grid-row: 2;
}

.csv2-opening--card:has(.csv2-opening__avatar) .csv2-opening__text,
.csv2-opening--card:has(.csv2-opening__avatar) .csv2-opening__by {
  grid-column: 2;
}

.csv2-opening--card .csv2-opening__name {
  font-size: 16px;
  line-height: 24px;
}

/* Video player: node 6088:19149/19150. Click-to-load, no iframe until played.
   No default top margin: the card variant supplies the 32px gap via the
   adjacent-sibling rule below, so a video-without-quote doesn't get a
   spurious gutter above it when there's no card. */
.csv2-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 0;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--p2-bg-light);
  cursor: pointer;
}

.csv2-opening--card + .csv2-video {
  margin-top: 32px;
}

.csv2-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csv2-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* Optically-centered play triangle drawn with borders (no icon asset). */
.csv2-video__play::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--p2-navy);
}

.csv2-video.is-playing .csv2-video__poster,
.csv2-video.is-playing .csv2-video__play {
  display: none;
}

.csv2-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   "In this article" TOC row (Task 8). Figma node 2391:460 — bold navy
   heading + pipe + read time above a numbered list of section links.
   The nav markup (.stampli-toc) is shared with the blog's [stampli_toc]
   shortcode; rules here are scoped under .csv2-toc so the blog is untouched.
   ========================================================================== */
.csv2-toc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Figma 2391:204 stacks the main column (quote -> TOC -> body) with 64px
     gaps; done as margins so FAQ/topics (which own their 64px) still match. */
  margin-top: 64px;
  font-family: var(--p2-font);
  color: var(--p2-navy);
}

.csv2-toc__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #c0dcfb; /* Brand Pallette/Baby blue, distinct from --p2-border-blue */
  font-size: 18px;
  line-height: 28px;
  white-space: nowrap;
}

.csv2-toc__heading {
  font-weight: 700;
}

.csv2-toc__sep,
.csv2-toc__time {
  font-weight: 400;
}

/* The case study omits the generic title paragraph (empty 'title' arg), but
   guard against it anyway in case a future variant passes one. */
.csv2-toc .stampli-toc__title {
  display: none;
}

.csv2-toc .stampli-toc__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: decimal;
  font-size: 16px;
  line-height: 24px;
}

.csv2-toc .stampli-toc__item {
  margin-left: 24px;
  /* Re-assert on the item: a global `li { list-style: none }` otherwise
     overrides the list's decimal and hides the numbers. */
  list-style: decimal;
}

.csv2-toc .stampli-toc__link {
  /* Padding + negative margin grows the tap area (~36px, capped by the
     12px list gap) without changing the visual rhythm. */
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
  line-height: 24px; /* a global link rule squeezes it to 1.3 otherwise */
  letter-spacing: normal;
  color: var(--p2-navy);
  text-decoration: none;
}

.csv2-toc .stampli-toc__link:hover,
.csv2-toc .stampli-toc__item.is-active .stampli-toc__link {
  text-decoration: underline;
}

/* The shared blog TOC injects a cyan bar (::before at left:-20px) on the
   active link - here it collides with the list numbers and the design has
   no such indicator (active = underline only). */
.csv2-toc .stampli-toc__item.is-active > .stampli-toc__link::before {
  content: none;
}

/* No H2s found (or target container missing) -> JS sets nav[hidden]; hide
   the whole meta row + nav together instead of leaving an orphaned heading. */
.csv2-toc:has(.stampli-toc[hidden]) {
  display: none;
}

/* ==========================================================================
   Article body: core blocks + the 5 CSV2 ACF blocks (Task 9).
   Figma f0b5ZoYx5ImO6acRcdJNv2 nodes: 2391:474 (paragraph), 2391:476
   (section heading), 2391:500 (Results sub-heading), 2391:483 (quote),
   2391:501 (Business Outcome), 2391:456 (Key takeaways), 2391:499 (divider).
   Desktop only (1440); responsive breakpoints land in Task 12.
   ========================================================================== */
.csv2-body {
  margin-top: 64px; /* same 64px column rhythm as .csv2-toc above */
  font-family: var(--p2-font);
}

/* Vertical rhythm: 32px between top-level blocks by default, with the
   section heading and divider getting their own wider gaps (higher
   specificity than the catch-all below so they win regardless of source
   order). No gap above the very first block in the article. */
.csv2-body > * {
  margin-top: 32px;
  margin-bottom: 0;
}

.csv2-body > *:first-child {
  margin-top: 0;
}

/* Section break: 64px per the Figma frame geometry (every section container
   in 2391:471 sits exactly 64 below the previous one). */
.csv2-body > .csv2-section-heading {
  margin-top: 64px;
}

.csv2-body > .csv2-section-heading:first-child {
  margin-top: 0;
}

/* Divider rhythm per the Figma Results section: 64 above (after the closing
   quote of a sub-story), 32 below before the next sub-heading; tighter 32
   when it sits right under a section heading (2391:499). */
.csv2-body > .csv2-divider {
  margin-top: 64px;
  margin-bottom: 32px;
}

.csv2-body > .csv2-section-heading + .csv2-divider {
  margin-top: 32px;
}

/* Paragraph. Figma 2391:474: Aeonik Regular 18/28, -0.05px tracking, navy. */
.csv2-body p {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.05px;
  color: var(--p2-navy);
}

/* Core Heading at its default H2 level: same scale as a label-less section
   heading (it joins the TOC just like one), incl. the wider 96px break. */
.csv2-body h2 {
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.5px;
  color: var(--p2-navy);
}

.csv2-body > h2 {
  margin-top: 64px;
}

/* Results sub-heading. Figma 2391:500: Aeonik Bold 24/28, navy. */
.csv2-body h3 {
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--p2-navy);
}

/* No H4 exists in the Figma; a sensible step below H3 for deep outlines. */
.csv2-body h4 {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--p2-navy);
}

/* app.css's Tailwind-style reset (ol,ul{list-style:none;margin:0;padding:0})
   loads after this file, but its plain-element selector has lower specificity
   than the class-scoped selectors below, so the disc/decimal markers here win. */
.csv2-body ul,
.csv2-body ol {
  margin-bottom: 0;
  padding-left: 27px; /* matches Figma list-item inset */
  list-style-position: outside;
  font-size: 18px;
  line-height: 24px;
  color: var(--p2-navy);
}

.csv2-body ul {
  list-style-type: disc;
}

.csv2-body ol {
  list-style-type: decimal;
}

.csv2-body li {
  margin: 0 0 12px;
}

.csv2-body li:last-child {
  margin-bottom: 0;
}

.csv2-body li::marker {
  color: var(--p2-navy);
}

.csv2-body a {
  color: var(--p2-navy);
  text-decoration: underline;
}

.csv2-body a:hover {
  color: var(--p2-slate);
}

.csv2-body strong {
  font-weight: 700;
}

/* Core image/embed blocks: Gutenberg wraps both in a <figure>, so reset the
   figure's UA margin (top rhythm comes from the catch-all rule above) and
   style the media itself. */
.csv2-body .wp-block-image,
.csv2-body .wp-block-embed {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.csv2-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Scoped to image/embed captions specifically (not figcaption in general) -
   .csv2-quote is also a <figure> with its own <figcaption> attribution row
   (.csv2-quote__by), which must not inherit this caption styling. */
.csv2-body .wp-block-image figcaption,
.csv2-body .wp-block-embed figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--p2-slate);
}

.csv2-body .wp-block-embed__wrapper {
  position: relative;
  max-width: 100%;
}

.csv2-body iframe {
  max-width: 100%;
  border: 0;
}

/* Video embeds keep 16:9 when the column narrows (core prints a fixed
   height attribute otherwise); rounded like the article images. */
.csv2-body .wp-block-embed.is-type-video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

/* Section heading block. Figma 2391:476: label + H2 share the same 32px /
   lh 33 / -0.5px Aeonik Medium type scale; only the color differs (label
   navy, title slate) - unusual but confirmed against the design. */
.csv2-section-heading {
  display: flex;
  flex-direction: column;
}

/* .csv2-body prefix (not just the bare class) is required here: the label
   is a <p>, and the generic ".csv2-body p" rule above has higher specificity
   (class+element) than a bare single-class selector would, which would
   otherwise win over source order and leave the label styled as body copy. */
.csv2-body .csv2-section-heading__label,
.csv2-body .csv2-h2 {
  margin: 0;
  font-family: var(--p2-font);
  font-size: 32px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.5px;
}

.csv2-body .csv2-section-heading__label {
  color: var(--p2-navy);
}

.csv2-body .csv2-h2 {
  color: var(--p2-slate);
}

/* Label-less section heading (e.g. "About Advance Financial", Figma
   2391:473): the standalone H2 is navy; slate is only for the subtitle
   line under a label. */
.csv2-body .csv2-section-heading .csv2-h2:first-child {
  color: var(--p2-navy);
}

/* Results cards grid (Figma 6088:19679): 2-up white cards, baby-blue
   border, 32px brand-blue icon, bold title + description at 18/28. */
.csv2-body .csv2-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.csv2-cards__item {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border: 1px solid var(--p2-border-blue);
  border-radius: 16px;
  background-color: #fff;
}

.csv2-cards__icon {
  display: block;
  margin-bottom: 32px;
}

.csv2-cards__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.csv2-body .csv2-cards__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: normal;
  color: var(--p2-navy);
}

.csv2-body .csv2-cards__text {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: normal;
  color: var(--p2-navy);
}

/* Quote block. Figma 2391:483: white card, left accent border. Distinct
   from the opening-quote variants above the article (Task 7,
   .csv2-opening--*), which use a different card style. */
.csv2-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 40px;
  /* Hairline outline so the white card reads against the white page
     (Brand Pallette/Global outline); left accent stays bright blue. */
  border: 1px solid #dbebfd;
  border-left: 7px solid #66a5f1; /* Brand Pallette/Bright blue */
  border-radius: 20px;
  background-color: #fff;
}

.csv2-quote__text {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: var(--p2-navy);
}

.csv2-quote__by {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* 32px round avatar beside the attribution (Figma body-quote cards). */
.csv2-quote__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.csv2-quote__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--p2-navy);
}

.csv2-quote__role {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--p2-navy);
}

/* Business Outcome callout. Figma 2391:501. */
/* Anchor targets for the hero stat pills: clear the fixed header on jump.
   All body children get the margin because the pill script lands on the
   sub-heading that opens an outcome's sub-story, not the callout itself. */
#csv2-article-start,
.csv2-outcome[id],
.csv2-body > * {
  scroll-margin-top: 128px;
}

.csv2-outcome {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 40px;
  border: 1px solid #dbebfd; /* Brand Pallette/Global outline, distinct from --p2-border-blue */
  border-radius: 16px;
  background-color: #fff;
}

.csv2-outcome__icon {
  flex-shrink: 0;
  display: flex;
}

.csv2-outcome__icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.csv2-outcome__content {
  flex: 1 0 0;
  min-width: 0;
}

/* Outcome copy comes from a basic wysiwyg since the 2026-07-29 round (bold
   allowed, standalone label removed), so the paragraphs carry no class.
   .csv2-body prefix required: these are <p> tags, and the generic
   ".csv2-body p" rule (class+element) otherwise outranks this selector. */
.csv2-body .csv2-outcome__content p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: normal; /* the -0.05px from .csv2-body p is paragraph-only in the Figma */
  color: var(--p2-navy);
}

.csv2-body .csv2-outcome__content p + p {
  margin-top: 12px;
}

/* Key takeaways card. Figma 2391:456: light blue card, both title and body
   copy set in Aeonik Medium (confirmed against the design - the card's
   text is not the regular-weight body copy used elsewhere in the article). */
.csv2-takeaways {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  border-radius: 16px;
  background-color: #eaf5fe;
}

/* .csv2-body prefix required: same reason as .csv2-outcome__content above. */
.csv2-body .csv2-takeaways__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: normal;
  color: var(--p2-navy);
}

/* Bulleted list per Figma 2391:459: disc markers 27px in, 18/24 Medium navy,
   a blank-line-sized gap between items. list-style re-asserted on the li
   because a global `li { list-style: none }` would hide the discs. */
.csv2-body .csv2-takeaways__list {
  margin: 0;
  padding-left: 27px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--p2-navy);
}

.csv2-body .csv2-takeaways__list li {
  list-style: disc;
}

.csv2-body .csv2-takeaways__list li + li {
  margin-top: 24px;
}

/* Divider. Figma 2391:499: 1px baby-blue rule. */
.csv2-divider {
  height: 0;
  margin: 0; /* top/bottom set by .csv2-body > .csv2-divider above */
  border: 0;
  border-top: 1px solid #c0dcfb; /* Brand Pallette/Baby blue */
}

/* ==========================================================================
   FAQ accordion (Task 10). Figma f0b5ZoYx5ImO6acRcdJNv2 node 2391:981:
   light-blue rounded question cards, plus icon that collapses to a minus
   when open, smooth height transition (grid-template-rows technique, same
   as the comparison template's accordion in dist/css/epic.min.css).
   ========================================================================== */
.csv2-faq {
  margin-top: 64px;
}

.csv2-faq__title {
  margin: 0 0 48px;
  font-size: 40px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.5px;
  color: var(--p2-navy);
}

.csv2-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.csv2-faq__item {
  background-color: rgba(192, 220, 251, 0.2);
  border: 1px solid #badffb;
  border-radius: 10px;
}

/* Smooth open/close via the native ::details-content box: it wraps
   .csv2-faq__a and gives us a padding-free collapsing element (grid-template-
   rows 0fr -> 1fr). .csv2-faq__a itself must also stay overflow:hidden/
   padding-free so its own automatic minimum size is 0 - only the <p> (a
   descendant, not the collapsing item) carries padding, so it gets clipped
   away entirely when closed instead of holding the row open. */
.csv2-faq__item::details-content {
  content-visibility: visible;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.csv2-faq__item[open]::details-content {
  grid-template-rows: 1fr;
}

.csv2-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  list-style: none;
  cursor: pointer;
  font-family: var(--p2-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: var(--p2-navy);
}

.csv2-faq__q::-webkit-details-marker {
  display: none;
}

/* Plus icon (two bars) that collapses to a minus when the details is open. */
.csv2-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.csv2-faq__icon::before,
.csv2-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #0472c3; /* Brand Pallette/Brand blue */
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.csv2-faq__icon::before {
  width: 16px;
  height: 2px;
}

.csv2-faq__icon::after {
  width: 2px;
  height: 16px;
}

.csv2-faq__item[open] .csv2-faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.csv2-faq__a {
  overflow: hidden;
  min-height: 0;
}

.csv2-faq__a > p {
  margin: 0;
  /* No top padding: the question's own 32px bottom padding already supplies
     the gap (the Figma open card shows ~24-32px between question and answer;
     24 + 32 was reading as 56). */
  padding: 0 32px 32px;
  font-family: var(--p2-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--p2-navy);
}

@media (prefers-reduced-motion: reduce) {
  .csv2-faq__item::details-content {
    transition: none;
  }
}

/* ==========================================================================
   Related topics (Task 11). Figma f0b5ZoYx5ImO6acRcdJNv2 node 2391:580:
   inline label + bold tag list, baby-blue rule underneath.
   ========================================================================== */
.csv2-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--p2-border-blue);
  font-family: var(--p2-font);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.3px;
  color: var(--p2-navy);
}

.csv2-topics__label {
  font-weight: 400;
}

.csv2-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csv2-topics__item {
  font-weight: 700;
}

/* ==========================================================================
   Read more rail (Task 11). Figma f0b5ZoYx5ImO6acRcdJNv2 node 2391:835
   (heading row) + 2391:844 (3-card grid). Renders full-width, outside the
   .csv2-article grid; p2-w-content on the inner wrappers owns horizontal
   containment (same pattern as .csv2-hero__inner).
   ========================================================================== */
/* Margins, NOT padding: .p2-w-content forces `padding: 0 !important`. */
.csv2-readmore__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 104px;
  margin-bottom: 40px;
}

/* Prev/next rail arrows (Figma 2391:837): 40px rounded squares. */
.csv2-readmore__nav {
  display: flex;
  gap: 12px;
}

.csv2-readmore__arrow {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 44px hit area over the 40px visual (WCAG 2.5.8). */
.csv2-readmore__arrow::after {
  content: '';
  position: absolute;
  inset: -2px;
}

.csv2-readmore__arrow svg {
  display: block;
  width: 40px;
  height: 40px;
}

.csv2-readmore__arrow svg rect {
  transition: fill 0.15s ease;
}

.csv2-readmore__arrow:hover:not(:disabled) svg rect {
  fill: #c9e1fb; /* one step deeper than the resting #DBEBFD tile */
}

.csv2-readmore__arrow:disabled {
  opacity: 0.45;
  cursor: default;
}

/* JS hides the whole nav when the rail has nothing to scroll (desktop with
   3 cards) - the Figma component assumes an overflowing carousel. */
.csv2-readmore__nav[hidden] {
  display: none;
}

/* ==========================================================================
   Footer CTA variant for case studies (Figma 2391:827): "Schedule a Demo"
   heading + subtitle + Learn more button, replacing the email form band.
   Base band styles live in footer-v2.css; only the variant's own bits here.
   ========================================================================== */
/* No drop-line ornament above this variant (the base band's ::before).
   Doubled class out-specifies the base rule in footer-v2.css, which loads
   after this file. */
.footer-v2__cta.footer-v2__cta--schedule::before {
  content: none;
}

.footer-v2__cta--schedule .footer-v2__cta-title {
  margin-bottom: 24px;
}

.footer-v2__cta--schedule .footer-v2__cta-text {
  margin: 0 0 32px;
  max-width: 880px;
  font-family: var(--p2-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #fff;
}

.csv2-readmore__title {
  margin: 0;
  font-family: var(--p2-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.5px;
  color: var(--p2-navy);
}

/* Horizontally scrollable card rail (the Figma mobile frame overflows its
   cards sideways; desktop fits exactly 3). gap needs !important to beat
   .p2-w-content's `gap: 0 !important`; bottom spacing is a margin because
   the same utility zeroes padding. */
.csv2-readmore .csv2-readmore__grid {
  display: flex;
  /* !important + the extra ancestor out-specifies .p2-w-content's own
     `gap: 0 !important` (phase2.css loads after this file). */
  gap: 24px !important;
  margin-bottom: 120px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.csv2-readmore__grid::-webkit-scrollbar {
  display: none;
}

.csv2-readmore__grid .csv2-card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
}

.csv2-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  border-radius: 24px 24px 16px 16px; /* wraps media top + body bottom radii */
  transition: box-shadow 0.2s ease;
}

/* No hover exists in the Figma (known gap across the Phase 2 file) - this is
   our proposal, consistent with the rest of the system: soft bright-blue
   lift plus a deeper body border. Pending client validation. */
.csv2-card:hover {
  box-shadow: 0 8px 24px rgba(102, 165, 241, 0.25);
}

.csv2-card:hover .csv2-card__body {
  border-color: #9ccbf7;
}

.csv2-card__body {
  transition: border-color 0.2s ease;
}

.csv2-card__media {
  /* Proportional to the Figma cover (400x223), not a fixed height: with the
     fluid card width a hard 223px made object-fit crop the banner art
     sideways. Fixed height kept as fallback for pre-aspect-ratio browsers. */
  height: 223px;
  aspect-ratio: 400 / 223;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background-color: var(--p2-bg-light);
}

@supports (aspect-ratio: 1) {
  .csv2-card__media {
    height: auto;
  }
}

.csv2-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csv2-card__body {
  display: flex;
  flex-direction: column;
  flex: 1; /* fill the stretched card so all rail cards read the same height */
  gap: 16px;
  padding: 24px 24px 32px;
  border: 1px solid var(--p2-border-blue);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background-color: #fff;
}

.csv2-card__kicker {
  margin: 0;
  font-family: var(--p2-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--p2-navy);
}

.csv2-card__title {
  margin: 0;
  font-family: var(--p2-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: var(--p2-navy);
}

/* ==========================================================================
   Responsive pass (Task 12). Phase 2 breakpoints: tablet <=1024, mobile
   <=768. Figma 7nu40yObBAdMAEBuCj6HMf node 6079:10400 (tablet) / 6079:9919
   (mobile) - an older iteration, used for LAYOUT/STACKING cues only; content
   and sections follow the desktop build above (Tasks 5-11).
   ========================================================================== */

@media (max-width: 1024px) {
  /* Aside narrows, main column takes the remaining fluid width (the 32px
     column-gap comes from the base .csv2 .csv2-article rule). */
  .csv2-article {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  /* Stronger, wider scrim so hero title/subtitle stay legible as the text
     column narrows toward the photo (text takes priority over the photo). */
  .csv2-hero::after {
    background: linear-gradient(100deg, rgb(15, 41, 91) 20%, rgba(30, 60, 116, 0.4) 60%, rgba(15, 41, 91, 0.7) 100%);
  }

  /* Hero goes 2-column per the Figma 768 frame: text column left, stat
     pills stacked vertically on the right. */
  .csv2-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 344px);
    grid-template-areas:
      'crumb crumb'
      'title stats'
      'subtitle stats'
      'cta stats'
      'logo stats';
  }

  /* Breathing room between the fluid text column and the pills. Done as
     padding because .p2-w-content forces `gap: 0 !important` (phase2.css),
     so column-gap on the grid can never apply. */
  .csv2-hero__title,
  .csv2-hero__subtitle {
    padding-right: 48px;
  }

  .csv2-hero__title {
    font-size: 32px;
    line-height: 36px;
  }

  .csv2-hero__logo {
    align-self: end;
    justify-self: start;
    margin-top: 32px;
  }

  .csv2-hero__stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 0;
  }

  .csv2-stat__link {
    padding: 24px;
  }

  .csv2-stat__value {
    font-size: 32px;
    line-height: 36px;
  }

  .csv2-stat__label {
    font-size: 16px;
  }
}

/* Mobile <=767 per the official Phase 2 convention (the Figma 768 frame IS
   tablet; phase2.css flips its content margins at 767 too). */
@media (max-width: 767px) {
  /* ---- Single-column stacking (Step 1) --------------------------------
     .csv2-aside and .csv2-main are sibling columns of .csv2-article, but
     the required mobile order interleaves the aside's content BETWEEN the
     opening quote and the TOC. display:contents drops their own boxes so
     their children become direct flex items of .csv2-article, which can
     then be reordered as a single column via `order` (DOM is untouched). */
  /* .csv2 .csv2-article out-specifies .p2-w-content so our !important gap
     beats its `gap: 0 !important`; top spacing via margin for the same
     reason as the desktop rule. */
  .csv2 .csv2-article {
    display: flex;
    flex-direction: column;
    gap: 32px !important;
    margin-top: 48px;
  }

  .csv2-aside,
  .csv2-main {
    display: contents;
  }

  /* Required order: hero -> opening (+video) -> logo -> data sheet ->
     buttons -> Share -> TOC -> body -> FAQ -> topics -> (read more, already
     last in the DOM, outside .csv2-article). */
  .csv2-opening {
    order: 1;
  }

  .csv2-video {
    order: 2;
  }

  .csv2-aside__logo {
    order: 3;
    /* display:contents on the aside makes the logo a direct flex item of
       the column - block the default cross-axis stretch. */
    align-self: flex-start;
    /* 48px total to the opening quote/video above (32 column gap + 16),
       per the 375 frame's group rhythm. */
    margin-top: 16px;
  }

  .csv2-aside__sheet {
    order: 4;
  }

  .csv2-aside__actions {
    order: 5;
  }

  .csv2-share {
    order: 6;
  }

  /* The 32px article gap owns the mobile rhythm - drop the desktop 64px. */
  .csv2-toc {
    order: 7;
    margin-top: 0;
  }

  .csv2-body {
    order: 8;
    margin-top: 0;
  }

  .csv2-faq {
    order: 9;
    /* The 32px article gap already separates FAQ from the body above it;
       add the remaining 32px so the section break still totals 64px, same
       as desktop. */
    margin-top: 32px;
  }

  .csv2-topics {
    order: 10;
    margin-top: 32px;
  }

  /* The article gap already supplies 32px between the quote card and the
     video; the desktop adjacent-sibling rule would otherwise double it. */
  .csv2-opening--card + .csv2-video {
    margin-top: 0;
  }

  /* ---- Hero: stats stacked, logo under the title, compressed type ----- */
  .csv2-hero {
    padding: 96px 0 64px;
  }

  .csv2-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      'crumb'
      'title'
      'subtitle'
      'cta'
      'stats';
  }

  /* The Figma 375 hero has no client logo - on mobile it renders below the
     opening quote instead (the aside logo, order 3 in the stacking above). */
  .csv2-hero__logo {
    display: none;
  }

  .csv2-hero__title {
    max-width: 100%;
    margin-bottom: 24px;
    font-size: 28px;
    line-height: 32px;
  }

  .csv2-hero__subtitle {
    max-width: 100%;
    font-size: 18px;
    line-height: 26px;
  }

  .csv2-hero__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
  }

  .csv2-stat__value {
    font-size: 28px;
    line-height: 30px;
  }

  /* ---- Opening quote + video: full-bleed within the article padding --- */
  .csv2-opening--plain .csv2-opening__text {
    font-size: 24px;
    line-height: 30px;
  }

  .csv2-opening--card {
    padding: 24px;
  }

  .csv2-opening--card .csv2-opening__text {
    font-size: 20px;
    line-height: 26px;
  }

  /* Avatar stacks above the quote instead of sitting beside it - there is
     not enough width left for a two-column card at this size. */
  .csv2-opening--card:has(.csv2-opening__avatar) {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .csv2-opening--card .csv2-opening__avatar {
    width: 64px;
    height: 64px;
  }

  .csv2-opening--card:has(.csv2-opening__avatar) .csv2-opening__avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .csv2-opening--card:has(.csv2-opening__avatar) .csv2-opening__text,
  .csv2-opening--card:has(.csv2-opening__avatar) .csv2-opening__by {
    grid-column: 1;
  }

  .csv2-opening--card:has(.csv2-opening__avatar) .csv2-opening__text {
    grid-row: 2;
  }

  .csv2-opening--card:has(.csv2-opening__avatar) .csv2-opening__by {
    grid-row: 3;
  }

  /* ---- Body blocks: tighter card padding on a narrow column ------------ */
  /* 48px section break on mobile (375 frame geometry). */
  .csv2-body > .csv2-section-heading,
  .csv2-body > h2 {
    margin-top: 48px;
  }

  .csv2-body .csv2-section-heading__label,
  .csv2-body .csv2-h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .csv2-quote,
  .csv2-outcome,
  .csv2-takeaways {
    padding: 24px;
  }

  .csv2-quote__text,
  .csv2-takeaways__title {
    font-size: 20px;
    line-height: 26px;
  }

  /* ---- FAQ / topics spacing per the mobile frame ----------------------- */
  .csv2-faq__title {
    margin-bottom: 32px;
    font-size: 28px;
    line-height: 32px;
  }

  .csv2-faq__q {
    padding: 20px;
    font-size: 18px;
    line-height: 24px;
  }

  .csv2-faq__a > p {
    padding: 0 20px 20px;
  }

  .csv2-topics {
    padding-bottom: 24px;
  }

  /* ---- Read more: single column ----------------------------------------- */
  .csv2-readmore__head {
    margin-top: 48px;
    margin-bottom: 24px;
  }

  .csv2-readmore__title {
    font-size: 28px;
    line-height: 32px;
  }

  /* Mobile keeps the horizontal rail (Figma 375 frame: 290px cards
     overflowing sideways) - narrower cards, swipe + arrows to navigate. */
  .csv2-readmore .csv2-readmore__grid {
    margin-bottom: 64px;
  }

  .csv2-readmore__grid .csv2-card {
    flex: 0 0 290px;
  }
}