/*
 * Full Disclosure (page-full-disclosure.php)
 * Section styles for template-parts/disclosure/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, header and footer.
 *
 * Measurements come from the 1920px Figma canvas and are converted with the
 * same clamp(min, px/1920*100vw, max) formula the type scale uses.
 */

.disclosure-hero__title .accent,
.disclosure-quote__heading .accent {
  color: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.disclosure-hero {
  background: var(--c-white);
  padding-block: clamp(2.5rem, calc(6.09 * var(--vw)), 7.308rem);
}
.disclosure-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 812fr) minmax(0, 567fr);
  column-gap: clamp(1.5rem, calc(5.0521 * var(--vw)), 6.0625rem); /* 97 */
  align-items: center;
}
.disclosure-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);
}
.disclosure-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: currentColor;
}
.disclosure-hero__title {
  margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.4rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.disclosure-hero__line {
  display: block;
}
.disclosure-hero__btn {
  margin-top: clamp(1.5rem, calc(3.65 * var(--vw)), 4.4rem);
  font-weight: 600;
  text-transform: uppercase;
}
.disclosure-hero__art {
  --hero-art-w: 567;
  /* Sits in the full-width container rather than the 1584 measure. */
  --hero-art-inset: 159;
}

/* ==========================================================================
   Pull quote
   ========================================================================== */
.disclosure-quote {
  background: var(--c-white);
  padding-block: clamp(3.25rem, calc(8.07 * var(--vw)), 9.684rem);
}
.disclosure-quote__inner {
  display: grid;
  grid-template-columns: minmax(0, 576fr) minmax(0, 909fr);
  column-gap: clamp(1.5rem, calc(5.21 * var(--vw)), 6.25rem);
  align-items: center;
}
.disclosure-quote__figure {
  margin: 0;
  aspect-ratio: 576 / 574;
  border-radius: min(24px, calc(1.25 * var(--vw-inset))); /* 24 */
  overflow: hidden;
}
.disclosure-quote__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 0;
  transition: transform 0.5s var(--ease-out);
}
.disclosure-quote__figure:hover img {
  transform: scale(1.03);
}
/* The quote is set on exactly two lines at every width. The break is the <br>
   the editor types after "transparency."; nowrap holds the rest of each half
   together, and the size falls back to a share of this column so the longer
   half (18.5em at 700 weight) always clears it. */
.disclosure-quote__copy {
  container-type: inline-size;
  margin: 0;
}
.disclosure-quote__mark {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: 1;
  color: var(--c-orange);
}
.disclosure-quote__heading {
  margin-top: clamp(0.25rem, calc(0.21 * var(--vw)), 0.25rem);
  white-space: nowrap;
  font-size: min(var(--fs-h3), 5cqi);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-charcoal);
}
.disclosure-quote__body {
  margin-top: clamp(1rem, calc(1.82 * var(--vw)), 2.2rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}

/* ==========================================================================
   What Full Disclosure means — copy plus four pillars
   ========================================================================== */
.disclosure-meaning {
  background: var(--c-ice);
  padding-block: clamp(2.5rem, calc(7.2917 * var(--vw)), 8.75rem) /* 140 */
    clamp(2.5rem, calc(7.2396 * var(--vw)), 8.6875rem); /* 139 */
}
.disclosure-meaning__inner {
  display: grid;
  grid-template-columns: minmax(0, 717fr) minmax(0, 812fr);
  column-gap: clamp(1.5rem, calc(2.86 * var(--vw)), 3.44rem);
  /* The copy is much shorter than the four tiles beside it, so it rides the
     centre of the row rather than hanging off the top. */
  align-items: center;
}
.disclosure-meaning__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.49;
  color: var(--c-charcoal);
}
.disclosure-meaning__body {
  margin-top: clamp(1rem, calc(2.19 * var(--vw)), 2.625rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.disclosure-meaning__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, calc(2.4 * var(--vw)), 2.875rem);
  row-gap: clamp(1rem, calc(2.2917 * var(--vw)), 2.75rem); /* 44 */
}
/* Square tiles that rest as icon + title and hand the description over on
   hover. The three rows are icon / title / body: at rest the spare height is
   split evenly above and below, which centres the title in the white box while
   the body row stays clipped to nothing; on hover the icon row collapses and
   the body takes every pixel it gives up. Both ends are <flex> values, which is
   what lets the swap animate — auto would jump. */
.disclosure-pillar {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  aspect-ratio: 383 / 400;
  border-radius: clamp(1.25rem, calc(1.93 * var(--vw)), 2.3125rem);
  padding: clamp(1.25rem, calc(2.08 * var(--vw)), 2.5rem) clamp(1.125rem, calc(1.67 * var(--vw)), 2rem);
  background: var(--c-white);
  /* Reveal target too — see .savings-card in front-page.css. */
  transition:
    var(--reveal-transition),
    grid-template-rows 0.35s ease,
    box-shadow 0.35s ease;
}
.disclosure-pillar:hover,
.disclosure-pillar:focus-within {
  grid-template-rows: 0fr auto 1fr;
  box-shadow: 0 6px 18px rgba(57, 57, 57, 0.12);
}
.disclosure-pillar:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}
/* min-height clears the automatic minimum that would otherwise stop either
   row shrinking past its own content. */
.disclosure-pillar__icon,
.disclosure-pillar__body {
  min-height: 0;
  overflow: hidden;
}
/* Pinned to the top of a row that owns all the resting slack, so the four
   icons line up with each other and the titles line up along the bottom. */
.disclosure-pillar__icon {
  align-self: start;
  transition: opacity 0.25s ease;
}
.disclosure-pillar:hover .disclosure-pillar__icon,
.disclosure-pillar:focus-within .disclosure-pillar__icon {
  opacity: 0;
}
.disclosure-pillar__icon img {
  display: block;
  width: clamp(2.5rem, calc(4.1667 * var(--vw)), 5rem); /* 80 */
  height: auto;
}
.disclosure-pillar__title {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-charcoal);
}
/* The gap above the body is padding, not margin — a margin would still take up
   room on the card while the row itself is collapsed to zero. */
.disclosure-pillar__body {
  padding-top: clamp(0.5rem, calc(0.83 * var(--vw)), 1rem);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-charcoal);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.disclosure-pillar:hover .disclosure-pillar__body,
.disclosure-pillar:focus-within .disclosure-pillar__body {
  opacity: 1;
}
/* Nothing to hover with, so the description simply stays out and the tile
   grows to hold it. The same reset runs below 1025 in the responsive block,
   where the pillars spread to full width and a square would be enormous. */
@media (hover: none) {
  .disclosure-pillar,
  .disclosure-pillar:hover,
  .disclosure-pillar:focus-within {
    grid-template-rows: auto auto auto;
    aspect-ratio: auto;
    box-shadow: none;
  }
  .disclosure-pillar:hover .disclosure-pillar__icon,
  .disclosure-pillar:focus-within .disclosure-pillar__icon {
    opacity: 1;
  }
  .disclosure-pillar__icon {
    align-self: start;
  }
  .disclosure-pillar__body {
    opacity: 1;
  }
}

/* ==========================================================================
   It's in the contract — pledge cards on navy
   ========================================================================== */
.disclosure-contract {
  background: var(--c-navy);
  padding-block: clamp(2.75rem, calc(6.88 * var(--vw)), 8.256rem);
}
.disclosure-contract__eyebrow {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-orange);
}
.disclosure-contract__heading {
  margin-top: clamp(1rem, calc(1.66 * var(--vw)), 2rem);
  max-width: 15em;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-white);
}
.disclosure-contract__body {
  margin-top: clamp(0.75rem, calc(1.0938 * var(--vw)), 1.3125rem); /* 21 */
  max-width: min(1079px, calc(56.1979 * var(--vw-inset)));
  font-size: var(--fs-body);
  line-height: 1.59;
  color: var(--c-white);
}
.disclosure-contract__body p + p {
  margin-top: 1.59em;
}
/* Each tile is as tall as the line it holds. Stretching them to share a row
   height is what left the bottom two standing half empty beside the seals
   card, which is taller than any of them by the nature of its content. */
.disclosure-contract__grid {
  margin-top: clamp(1.5rem, calc(3.33 * var(--vw)), 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, calc(2.81 * var(--vw)), 3.375rem);
  row-gap: clamp(1rem, calc(2.08 * var(--vw)), 2.5rem);
  align-items: start;
}
/* The tiles were drawn around a decorative quote glyph and a statement; with
   the glyph gone (see contract.php) they close up to the statement, so the
   padding comes in from 45/44 to 30/36 and the row stops carrying the empty
   space the glyph used to fill. */
.disclosure-pledge {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: clamp(1rem, calc(1.61 * var(--vw)), 1.9375rem);
  padding: clamp(1.125rem, calc(1.56 * var(--vw)), 1.875rem) clamp(1.25rem, calc(1.875 * var(--vw)), 2.25rem);
  background: rgba(255, 255, 255, 0.1);
  /* Reveal target too — see .disclosure-box in front-page.css. */
  transition:
    var(--reveal-transition),
    background-color var(--motion) ease;
}
/* Not links, so nothing moves — the panel just catches a little more light,
   the same treatment as .disclosure-box on the home page. */
.disclosure-pledge:hover {
  background: rgba(255, 255, 255, 0.18);
}
.disclosure-pledge__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.19;
  color: var(--c-white);
}
.disclosure-pledge__text--center {
  text-align: center;
}
.disclosure-pledge--validated {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.disclosure-pledge__seals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, calc(0.47 * var(--vw)), 0.5625rem);
}
/* Both seals are circle-masked in the design; the VI artwork ships on a white
   square, so the radius is doing real work here, not just rounding a corner. */
.disclosure-pledge__seals img {
  display: block;
  width: clamp(5rem, calc(7.66 * var(--vw)), 9.1875rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
/* The medal PNG carries ~5% of transparent padding on every side that the VI
   seal does not, so equal boxes render unequal discs. Figma solves it by
   placing the medal at 163.35 inside the same 147.1 circle — a 1.111 factor —
   which is what the wider box below reproduces. The negative margin absorbs
   the extra height so the row still measures the design's 147.1. */
.disclosure-pledge__seals img.disclosure-pledge__seal--medal {
  width: clamp(5.5525rem, calc(8.51 * var(--vw)), 10.2097rem);
  margin-block: clamp(-0.5081rem, calc(-0.42 * var(--vw)), -0.2763rem);
}
.disclosure-pledge__reports {
  margin-top: clamp(1.25rem, calc(2.24 * var(--vw)), 2.6875rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, calc(3.5 * var(--vw)), 4.2rem);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.19;
}
.disclosure-pledge__reports a {
  color: var(--c-orange);
  text-decoration: underline;
}

/* ==========================================================================
   Ahead of the regulations — CAA 2026
   ========================================================================== */
.disclosure-regulations {
  background: var(--c-white);
  padding-block: clamp(3.5rem, calc(8.8 * var(--vw)), 10.56rem);
}
.disclosure-regulations__inner {
  display: grid;
  grid-template-columns: minmax(0, 615fr) minmax(0, 812fr);
  column-gap: clamp(2rem, calc(8.18 * var(--vw)), 9.8rem);
  align-items: start;
}
.disclosure-regulations__eyebrow {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-blue);
}
.disclosure-regulations__heading {
  margin-top: clamp(0.5rem, calc(1.1458 * var(--vw)), 1.375rem); /* 22 */
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-charcoal);
}
.disclosure-regulations__body {
  margin-top: clamp(0.75rem, calc(1.0938 * var(--vw)), 1.3125rem); /* 21 */
  font-size: var(--fs-body);
  line-height: 1.81;
  color: var(--c-charcoal);
}
.disclosure-regulations__note {
  margin-top: clamp(0.5rem, calc(0.7813 * var(--vw)), 0.9375rem); /* 15 */
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.81;
  color: var(--c-orange);
}
.disclosure-regulations__list {
  margin-top: clamp(0.5rem, calc(0.7813 * var(--vw)), 0.9375rem); /* 15 */
}
.disclosure-caa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(1rem, calc(2.5 * var(--vw)), 3rem);
  row-gap: clamp(0.5rem, calc(0.9792 * var(--vw)), 1.175rem); /* 18.8 */
  align-items: start;
  padding-block: clamp(1rem, calc(2.6042 * var(--vw)), 3.125rem) clamp(1rem, calc(1.7188 * var(--vw)), 2.0625rem); /* 50 33 */
  border-top: 1px solid rgba(57, 57, 57, 0.5);
}
.disclosure-caa:last-child {
  border-bottom: 1px solid rgba(57, 57, 57, 0.5);
}
.disclosure-caa__label {
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.81;
  text-transform: uppercase;
}
.disclosure-caa__label--law {
  grid-column: 1;
  color: var(--c-charcoal);
}
.disclosure-caa__label--drx {
  grid-column: 3;
  color: var(--c-orange);
}
.disclosure-caa__requirement,
.disclosure-caa__answer {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.disclosure-caa__requirement {
  grid-column: 1;
}
.disclosure-caa__arrow {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-top: clamp(0.125rem, calc(0.2083 * var(--vw)), 0.25rem); /* 4 */
}
.disclosure-caa__arrow img {
  display: block;
  width: clamp(1.75rem, calc(2.4 * var(--vw)), 2.875rem);
  height: auto;
}
.disclosure-caa__answer {
  grid-column: 3;
}

/* ==========================================================================
   The proof — three numbers
   ========================================================================== */
.disclosure-proof {
  background: var(--c-ice);
  padding-block: clamp(1.75rem, calc(4.3229 * var(--vw)), 5.1875rem) /* 83 */
    clamp(1.75rem, calc(4.3229 * var(--vw)), 5.1875rem); /* 83 */
}
.disclosure-proof__heading {
  max-width: min(1320px, calc(68.75 * var(--vw-inset)));
  text-wrap: balance;
  margin-inline: auto;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
.disclosure-proof__grid {
  margin-top: clamp(1.5rem, calc(3.18 * var(--vw)), 3.8rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.disclosure-stat {
  padding-inline: clamp(1rem, calc(2.45 * var(--vw)), 2.94rem);
  text-align: center;
}
.disclosure-stat:first-child {
  padding-inline: clamp(0.25rem, calc(0.75 * var(--vw)), 0.9rem);
}
.disclosure-stat:first-child .disclosure-stat__value {
  white-space: nowrap;
}
.disclosure-stat + .disclosure-stat {
  border-left: 1px solid rgba(57, 57, 57, 0.5);
}
.disclosure-stat__value {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-orange);
}
.disclosure-stat__label {
  margin-top: clamp(0.5rem, calc(0.8333 * var(--vw)), 1rem); /* 16 */
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-charcoal);
}
/* The supporting line is plain text — only the value above it counts up. */
.disclosure-stat__detail {
  max-width: 20em;
  margin: clamp(0.25rem, calc(0.4167 * var(--vw)), 0.5rem) auto 0; /* 8 */
  font-size: clamp(0.875rem, calc(0.9375 * var(--vw)), 1.125rem); /* 18 */
  text-wrap: balance;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.disclosure-proof__actions {
  margin-top: clamp(1.75rem, calc(3.125 * var(--vw)), 3.75rem); /* 60 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.disclosure-proof__note {
  max-width: min(1200px, calc(62.5 * var(--vw-inset)));
  margin-top: clamp(1rem, calc(1.25 * var(--vw)), 1.5rem); /* 24 */
  font-size: clamp(0.8125rem, calc(0.7813 * var(--vw)), 0.9375rem); /* 15 */
  line-height: 1.5;
  color: var(--c-charcoal);
}

/* ==========================================================================
   How we compare
   ========================================================================== */
/* The chart is drawn 30% smaller than the canvas size. Every measurement
   inside the card is a share of --vw, so one factor on all of them — width
   included — shrinks it evenly instead of just squeezing the columns. Below
   1025 the card is already a horizontal scroller, where taking another 30%
   off the type would only cost legibility, so the factor drops out. */
.disclosure-compare {
  --chart: 0.7;
  background: var(--c-white);
  padding-block: clamp(2rem, calc(5.31 * var(--vw)), 6.372rem);
}
.disclosure-compare__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
.disclosure-compare__card {
  max-width: calc(var(--chart) * 100%);
  margin-top: clamp(1.5rem, calc(2.6 * var(--vw)), 3.125rem);
  margin-inline: auto;
  border: 1px solid rgba(57, 57, 57, 0.5);
  border-radius: calc(var(--chart) * clamp(1.5rem, calc(2.71 * var(--vw)), 3.25rem));
  padding: calc(var(--chart) * clamp(1.5rem, calc(3.4 * var(--vw)), 4rem)) calc(var(--chart) * clamp(1rem, calc(3.33 * var(--vw)), 4rem));
  background: var(--c-white);
  box-shadow: calc(var(--chart) * 8px) calc(var(--chart) * 8px) calc(var(--chart) * 11.3px) rgba(0, 0, 0, 0.25);
}
.disclosure-compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1.79fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  min-height: calc(var(--chart) * clamp(3.5rem, calc(6.2 * var(--vw)), 7.44rem));
}
.disclosure-compare__row + .disclosure-compare__row {
  border-top: 1px solid rgba(57, 57, 57, 0.5);
}
.disclosure-compare__row--head {
  min-height: 0;
  padding-bottom: calc(var(--chart) * clamp(0.75rem, calc(1.72 * var(--vw)), 2.06rem));
}
.disclosure-compare__feature {
  font-size: calc(var(--chart) * var(--fs-body));
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-charcoal);
}
.disclosure-compare__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
/* The DisclosedRx column runs as a cream stripe the height of the table. */
.disclosure-compare__cell--highlight {
  background: var(--c-cream);
}
.disclosure-compare__row--head .disclosure-compare__cell {
  padding-top: calc(var(--chart) * clamp(0.5rem, calc(0.83 * var(--vw)), 1rem));
}
.disclosure-compare__chip {
  display: block;
  width: 100%;
  max-width: calc(var(--chart) * min(270px, calc(14.0625 * var(--vw-inset))));
  border-radius: calc(var(--chart) * min(9px, calc(0.4688 * var(--vw-inset))));
  padding: 0.6em 0.5em;
  font-size: calc(var(--chart) * var(--fs-body));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.disclosure-compare__chip--traditional {
  background: #d9d9d9;
  color: var(--c-charcoal);
}
.disclosure-compare__chip--transparent {
  background: var(--c-charcoal);
  color: var(--c-white);
}
.disclosure-compare__chip--drx {
  background: var(--c-orange);
  color: var(--c-white);
}
.disclosure-compare__icon {
  display: block;
  width: calc(var(--chart) * clamp(2.25rem, calc(3.125 * var(--vw)), 3.75rem));
  height: auto;
}
.disclosure-compare__maybe {
  font-size: calc(var(--chart) * var(--fs-body));
  line-height: 1.5;
  color: var(--c-charcoal);
}

/* ==========================================================================
   Closing promise
   ========================================================================== */
.disclosure-promise {
  background: var(--c-white);
  padding-block: clamp(2rem, calc(5.1 * var(--vw)), 6.12rem);
}
.disclosure-promise__heading {
  max-width: min(954px, calc(49.6875 * var(--vw-inset)));
  margin-inline: auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.5;
  text-align: center;
  color: var(--c-orange);
}
.disclosure-promise__body {
  margin-top: clamp(1rem, calc(1.67 * var(--vw)), 2rem);
  max-width: min(1179px, calc(61.4062 * var(--vw-inset)));
  margin-inline: auto;
  font-size: var(--fs-h6);
  line-height: 1.6;
  text-align: center;
  color: var(--c-charcoal);
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.disclosure-cta {
  background: var(--c-navy);
  padding-block: clamp(2rem, calc(5.1 * var(--vw)), 6.12rem);
}
.disclosure-cta__heading {
  max-width: min(1072px, calc(55.8333 * var(--vw-inset)));
  margin-inline: auto;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  color: var(--c-white);
}
.disclosure-cta__actions {
  margin-top: clamp(1.5rem, calc(3.02 * var(--vw)), 3.625rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, calc(1.98 * var(--vw)), 2.375rem);
}
.disclosure-cta__btn {
  min-width: clamp(14rem, calc(19.6 * var(--vw)), 23.5rem);
  font-weight: 600;
  text-transform: uppercase;
}
.disclosure-cta__btn--alt {
  background: var(--c-white);
  color: var(--c-orange);
}
.disclosure-cta__btn--alt:hover {
  background: #f5f5f5;
  filter: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .disclosure-hero__inner,
  .disclosure-quote__inner,
  .disclosure-meaning__inner,
  .disclosure-regulations__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, calc(4 * var(--vw)), 3rem);
  }
  /* Stacked, the art has no column to sit at the start of, so its 567 cap is
     centred rather than hanging against the left gutter. */
  .disclosure-hero__art img {
    margin-inline: auto;
  }
  .disclosure-contract__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .disclosure-contract__body {
    margin-top: clamp(1.5rem, calc(3 * var(--vw)), 2.5rem);
  }
  .disclosure-regulations__list {
    margin-top: 0;
  }
  /* Full-width pillars would make for a very large square, so below here the
     descriptions are simply always out. */
  .disclosure-pillar,
  .disclosure-pillar:hover,
  .disclosure-pillar:focus-within {
    grid-template-rows: auto auto auto;
    aspect-ratio: auto;
    box-shadow: none;
  }
  .disclosure-pillar:hover .disclosure-pillar__icon,
  .disclosure-pillar:focus-within .disclosure-pillar__icon {
    opacity: 1;
  }
  .disclosure-pillar__icon {
    align-self: start;
  }
  .disclosure-pillar__body {
    opacity: 1;
  }
  /* The table stops fitting four columns long before the page does. */
  .disclosure-compare {
    --chart: 1;
  }
  .disclosure-compare__card {
    overflow-x: auto;
    /* Fades the table's trailing edge toward transparent instead of a hard
       crop, so the row reads as "swipe for more" rather than cut-off text.
       Right edge only: the table always starts scrolled to the left, where
       nothing is hidden that direction, so a matching left fade would just
       dim fully-visible labels for no reason. A mask (the technique used on
       .audience-switcher__list in style.css) doesn't reliably paint over
       this table's <img> check/cross icons in Chrome, so this uses a sticky
       pseudo-element instead: display:flex makes it a flex item alongside
       .disclosure-compare__table, and the negative margin stops it adding
       to the scrollable width, so only its background paints, pinned to the
       visible edge at any scroll position. */
    display: flex;
  }
  .disclosure-compare__card::after {
    content: "";
    position: sticky;
    z-index: 1;
    right: 0;
    width: 16px;
    flex-shrink: 0;
    margin-left: -16px;
    pointer-events: none;
    background: linear-gradient(to left, var(--c-white), transparent);
  }
  .disclosure-compare__table {
    min-width: 700px;
  }
}

@media (max-width: 767px) {
  .disclosure-meaning__grid,
  .disclosure-contract__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .disclosure-proof__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, calc(5 * var(--vw)), 2.5rem);
  }
  .disclosure-stat + .disclosure-stat {
    border-left: 0;
    border-top: 1px solid rgba(57, 57, 57, 0.5);
    padding-top: clamp(1.5rem, calc(5 * var(--vw)), 2.5rem);
  }
  .disclosure-stat:first-child {
    padding-inline: clamp(1rem, calc(2.45 * var(--vw)), 2.94rem);
  }
  .disclosure-stat:first-child .disclosure-stat__value {
    white-space: normal;
  }
  .disclosure-caa {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(0.25rem, calc(1 * var(--vw)), 0.5rem);
  }
  .disclosure-caa__label--drx,
  .disclosure-caa__requirement,
  .disclosure-caa__answer,
  .disclosure-caa__arrow {
    grid-column: 1;
  }
  .disclosure-caa__arrow {
    grid-row: auto;
    transform: rotate(90deg);
    transform-origin: left center;
    margin-block: clamp(0.75rem, calc(3 * var(--vw)), 1.25rem);
  }
  .disclosure-caa__label--drx {
    margin-top: clamp(0.75rem, calc(3 * var(--vw)), 1.25rem);
  }
  .disclosure-cta__btn {
    width: 100%;
  }
}

/* A visitor who has asked for reduced motion still gets the feedback, just
   not the movement — see the matching block in front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .disclosure-quote__figure:hover img {
    transform: none;
  }
}