/* ============================================================
   Fraser Insights '26 — article design system (Phase A)
   Source of truth: Figma "Fraser" file wfQ6g7U1Mh9y6chAo1y9Z9,
   page "Final Design", frame "Insights Detailed" (406-3, 1920×18864)
   Tokens pixel-verified against the 1:1 export on 2026-07-26.

   Scope: everything is scoped under #fdx26-cms-bound so this file
   is inert on old-template pages. Loaded only on the News &
   Insights collection template via reviewed page custom code.
   ============================================================ */

#fdx26-cms-bound {
  /* ---- verified tokens ---- */
  --f26-navy: #001168;
  --f26-cyan: #23E5FF;
  --f26-hairline: #E6E7F0;
  --f26-grad: linear-gradient(148.08deg, #020A39 31.01%, #4198FF 138.44%);
  --f26-font: "TWK Lausanne", Arial, sans-serif;
  /* ---- fluid layout ---- */
  --f26-margin: clamp(16px, 1.46vw, 28px);
  --f26-wide: min(1006px, 92vw);             /* intro / accordions */
  --f26-xwide: min(1474px, calc(100vw - 2 * var(--f26-margin))); /* hero title / pull quote */
  --f26-faq: min(694px, 92vw);

  font-family: var(--f26-font);
  color: var(--f26-navy);
  background: #fff;
  display: block;
}


/* ============ LEGACY LAYER NEUTRALIZATION ============
   The site stylesheet carries three earlier fdx2/fdx26 generations
   (fixed-width Figma build, v4 fluid build, and drifted tokens like
   #06166f). Every layout-critical property below is set explicitly
   so those layers cannot leak through. */
#fdx26-cms-bound.fdx26-cms { color: var(--f26-navy); }
#fdx26-cms-bound .fdx26-richtext { color: var(--f26-navy); }
#fdx26-cms-bound .fdx26-body-inner {
  display: block;
  max-width: 1474px;
  margin: 0 auto;
  padding: 0;
}
#fdx26-cms-bound .fdx26-article-slot {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
#fdx26-cms-bound .fdx26-richtext p {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}
#fdx26-cms-bound .fdx2-hero > div > span { display: none; } /* legacy hero labels duplicate global nav */

/* ============ HERO ============ */
#fdx26-cms-bound .fdx2-hero {
  position: relative;
  min-height: min(63.5vw, 1220px);           /* 1220 @1920 */
  background: var(--f26-grad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--f26-margin);
  isolation: isolate;
}
#fdx26-cms-bound .fdx2-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* featured-image treatment: crisp toward the upper right, fading
     under the title zone so the wordmark/title keep contrast */
  filter: blur(3px) saturate(1.05);
  mix-blend-mode: normal;
  opacity: .82;
  -webkit-mask-image: linear-gradient(112deg, rgba(0,0,0,.14) 26%, rgba(0,0,0,.62) 48%, rgba(0,0,0,.98) 72%);
  mask-image: linear-gradient(112deg, rgba(0,0,0,.14) 26%, rgba(0,0,0,.62) 48%, rgba(0,0,0,.98) 72%);
  z-index: 0;
  transform: scale(1.04);                    /* hide blur edges */
  pointer-events: none;
}
#fdx26-cms-bound .fdx2-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2,10,57,.15) 0%, rgba(2,10,57,.55) 78%, rgba(2,10,57,.72) 100%);
  pointer-events: none;
}
#fdx26-cms-bound .fdx2-hero > div { position: relative; z-index: 2; }
#fdx26-cms-bound .fdx2-title {
  max-width: var(--f26-xwide);
  color: #fff;
  font-weight: 700;
  font-size: clamp(44px, 6.77vw, 130px);     /* 130/130 @1920 */
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(24px, 3vw, 56px);
  overflow-wrap: break-word;
}
#fdx26-cms-bound .fdx2-meta {
  display: flex;
  gap: clamp(24px, 4vw, 72px);
  color: #fff;
  padding-bottom: clamp(16px, 2vw, 40px);
}
#fdx26-cms-bound .fdx2-meta-label {
  font-weight: 550;
  font-size: 14px;
  line-height: 1.3;
  opacity: .55;
  margin: 0 0 4px;
}
#fdx26-cms-bound .fdx2-meta-value {
  font-weight: 550;
  font-size: 18px;
  line-height: 1.1;
  margin: 0;
}

/* ============ BODY SHELL + right hairline rail ============ */
#fdx26-cms-bound .fdx26-body {
  position: relative;
  padding: clamp(48px, 6vw, 120px) var(--f26-margin);
  background: #fff;
}
#fdx26-cms-bound .fdx26-body::after {      /* right hairline rail (x=1744 @1920) */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(24px, 9.16vw, 176px);
  width: 1px;
  background: var(--f26-hairline);
  pointer-events: none;
}
#fdx26-cms-bound .fdx26-body-inner { max-width: 1474px; margin: 0 auto; }

/* ============ RICH TEXT BASELINE ============ */
#fdx26-cms-bound .fdx26-richtext {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  color: var(--f26-navy);
  letter-spacing: -0.01em;
}
#fdx26-cms-bound .fdx26-richtext p {
  margin: 0 0 1em;
  max-width: 694px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
#fdx26-cms-bound .fdx26-lead,
#fdx26-cms-bound .fdx26-statement p,
#fdx26-cms-bound .fdx26-caveat .fdx26-flow p,
#fdx26-cms-bound .fdx26-ahead .fdx26-flow p,
#fdx26-cms-bound .fdx26-closing .fdx26-flow p { text-align: left; hyphens: none; -webkit-hyphens: none; }
#fdx26-cms-bound .fdx26-richtext a {
  color: inherit;
  font-weight: 650;
  text-decoration: none;
  border-radius: 2px;
  background-image: linear-gradient(transparent 62%, rgba(35, 229, 255, .28) 62%);
  box-shadow: inset 0 -1px 0 rgba(35, 229, 255, .82);
  transition: background-color .16s ease, color .16s ease;
}
#fdx26-cms-bound .fdx26-richtext a:hover { background-color: rgba(35, 229, 255, .12); }
#fdx26-cms-bound .fdx26-richtext li { margin: 0 0 .5em; }
#fdx26-cms-bound .fdx26-richtext blockquote {
  border: 0;
  position: relative;
  padding: 0 0 0 1.4em;
  font-weight: 550;
  font-size: clamp(22px, 1.46vw, 28px);
  line-height: 1.43;                          /* 28/40 */
  max-width: 928px;
}

/* ============ SECTION SCAFFOLD (emitted by insights26.js) ============ */
#fdx26-cms-bound .fdx26-section {
  position: relative;
  display: block;
  padding: clamp(56px, 6.25vw, 120px) 0;
  border-top: 1px solid var(--f26-hairline);
  background: transparent;
  overflow: visible;
}
@media (min-width: 992px) {
  #fdx26-cms-bound .fdx26-section {
    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    gap: 24px clamp(48px, 8vw, 160px);
    align-items: start;
  }
  #fdx26-cms-bound .fdx26-section > h2.fdx26-heading { grid-column: 1; grid-row: 1; }
  #fdx26-cms-bound .fdx26-section > .fdx26-col { grid-column: 2; grid-row: 1; min-width: 0; }
  #fdx26-cms-bound .fdx26-section > .fdx26-watermark { grid-column: 1; grid-row: 2; }
  /* full-span section types stack heading over content instead */
  #fdx26-cms-bound .fdx26-intro,
  #fdx26-cms-bound .fdx26-statement,
  #fdx26-cms-bound .fdx26-compare,
  #fdx26-cms-bound .fdx26-timeline,
  #fdx26-cms-bound .fdx26-actions,
  #fdx26-cms-bound .fdx26-audience,
  #fdx26-cms-bound .fdx26-closing,
  #fdx26-cms-bound .fdx26-dark,
  #fdx26-cms-bound .fdx26-ahead { display: block; }
  #fdx26-cms-bound .fdx26-caveat { grid-template-columns: minmax(180px, .35fr) minmax(0, 1.65fr); }
  #fdx26-cms-bound .fdx26-caveat > .fdx26-caveat-mark { grid-column: 1; grid-row: 1; }
  #fdx26-cms-bound .fdx26-caveat > h2.fdx26-heading { grid-column: 2; grid-row: 1; }
  #fdx26-cms-bound .fdx26-caveat > .fdx26-col { grid-column: 2; grid-row: 2; }
}
#fdx26-cms-bound .fdx26-section:first-child { border-top: 0; }
#fdx26-cms-bound .fdx26-heading {
  font-weight: 550;
  font-size: clamp(40px, 4.17vw, 80px);       /* 80/84 @1920 */
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(32px, 3.5vw, 64px);
  max-width: 1006px;
  position: relative;
}
#fdx26-cms-bound .fdx26-section-number {
  display: block;
  font-weight: 550;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--f26-cyan);
  margin-bottom: 12px;
}
#fdx26-cms-bound .fdx26-flow { max-width: 694px; }

/* Rich-text figures often carry an inline `margin: … auto`, which centres them
   across the whole column rather than the 694px reading measure the prose sits
   in — a badge then lands half a column right of the text it belongs to. Pin
   the figure to the measure's left edge; the image's own auto margins still
   centre it, so it reads as centred over the prose. Inline styles need the
   !important to lose. */
#fdx26-cms-bound .fdx26-section figure.fdx26-flow {
  margin-left: 0 !important;
  margin-right: auto !important;
}
#fdx26-cms-bound .fdx26-lead {
  font-weight: 550;
  font-size: clamp(28px, 2.29vw, 44px);       /* 44/52 */
  line-height: 1.18;
  max-width: var(--f26-wide);
  letter-spacing: -0.01em;
}

/* ============ ITEM GRIDS (H3-split groups) ============ */
#fdx26-cms-bound .fdx26-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 2.5vw, 48px);
  max-width: 1474px;
}
#fdx26-cms-bound .fdx26-item { position: relative; min-width: 0; }
/* bordered card treatment for feature blocks in light sections */
#fdx26-cms-bound .fdx26-intro .fdx26-item,
#fdx26-cms-bound .fdx26-editorial .fdx26-item,
#fdx26-cms-bound .fdx26-statement .fdx26-item,
#fdx26-cms-bound .fdx26-reasons .fdx26-item {
  border: 1px solid var(--f26-hairline);
  border-radius: 8px;
  padding: clamp(20px, 1.8vw, 34px);
}
#fdx26-cms-bound .fdx26-item p,
#fdx26-cms-bound .fdx26-item li {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
#fdx26-cms-bound .fdx26-item h3 {
  font-weight: 550;
  font-size: clamp(22px, 1.46vw, 28px);
  line-height: 1.2;
  margin: 0 0 .6em;
}

/* ============ REASONS / CRITERIA — giant cyan numerals ============ */
#fdx26-cms-bound .fdx26-reasons-number,
#fdx26-cms-bound .fdx26-criteria-number {
  display: block;
  font-weight: 550;
  font-size: clamp(64px, 8.33vw, 160px);      /* 160/135 */
  line-height: .95;
  letter-spacing: -0.02em;
  color: var(--f26-cyan);
  margin: 0 0 .2em;
}
#fdx26-cms-bound .fdx26-reasons .fdx26-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
#fdx26-cms-bound .fdx26-criteria .fdx26-item { border-top: 1px solid var(--f26-hairline); padding-top: 24px; }

/* ============ COMPARE — giant category labels + chip stacks ============ */
#fdx26-cms-bound .fdx26-compare .fdx26-items {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 4.58vw, 88px);
}
#fdx26-cms-bound .fdx26-compare .fdx26-item h3 {
  font-size: clamp(56px, 8.33vw, 160px);      /* 160/.84 giant category label */
  line-height: .84;
  font-weight: 550;
  color: var(--f26-cyan);
  letter-spacing: -0.01em;
  margin: 0 0 .3em;
  overflow-wrap: normal;
}
#fdx26-cms-bound .fdx26-compare .fdx26-item ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0 0 32px;
  padding: 0;
  max-width: 460px;
}
#fdx26-cms-bound .fdx26-compare .fdx26-item .fdx26-compare-chip {
  border-radius: 4px;
  min-height: 0;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 550;
  line-height: 1;
}
#fdx26-cms-bound .fdx26-compare .fdx26-item .fdx26-compare-chip::before { display: none; }
#fdx26-cms-bound .fdx26-compare .fdx26-item p { font-size: 16px; line-height: 1.5; }

/* ============ COMPARE — cyan chips ============ */
#fdx26-cms-bound .fdx26-compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; max-width: 1006px; }
#fdx26-cms-bound .fdx26-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--f26-cyan);
  color: var(--f26-navy);
  border-radius: 8px;
  min-height: 58px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.1;
}
#fdx26-cms-bound .fdx26-compare-chip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}

/* ============ TIMELINE — cards ============ */
#fdx26-cms-bound .fdx26-timeline .fdx26-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
#fdx26-cms-bound .fdx26-timeline .fdx26-item {
  border: 1px solid var(--f26-hairline);
  border-radius: 18px;
  padding: clamp(20px, 1.7vw, 32px);
  min-height: 300px;
}
#fdx26-cms-bound .fdx26-timeline-number {
  display: block;
  font-weight: 550;
  font-size: 24px;
  line-height: 1;
  color: var(--f26-navy);
  opacity: .35;
  margin-bottom: 18px;
}
#fdx26-cms-bound .fdx26-timeline .fdx26-item::before {
  content: "";
  display: block;
  width: 26px; height: 26px;
  background: var(--f26-cyan);
  border-radius: 4px;
  transform: rotate(45deg);
  margin: 4px 4px 22px;
}

/* ============ ACTIONS — bordered rows + check circles ============ */
#fdx26-cms-bound .fdx26-actions .fdx26-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
#fdx26-cms-bound .fdx26-actions .fdx26-item {
  border: 1px solid var(--f26-hairline);
  border-radius: 20px;
  padding: clamp(20px, 1.8vw, 34px);
  padding-right: 88px;
  position: relative;
}
#fdx26-cms-bound .fdx26-actions-number {
  position: absolute;
  top: clamp(20px, 1.8vw, 34px);
  right: clamp(20px, 1.8vw, 34px);
  width: 52px; height: 52px;
  border: 1px solid var(--f26-hairline);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
  font-size: 16px;
  color: var(--f26-navy);
}

/* ============ CAVEAT — giant cyan quote ============ */
#fdx26-cms-bound .fdx26-caveat { padding-top: clamp(72px, 8vw, 160px); }
#fdx26-cms-bound .fdx26-caveat-mark,
#fdx26-cms-bound .fdx26-quote-mark {
  display: block;
  color: var(--f26-cyan);
  font-weight: 700;
  font-size: clamp(120px, 15.5vw, 297px);
  line-height: .6;
  height: .42em;
  overflow: hidden;
  margin-bottom: 28px;
  user-select: none;
}
#fdx26-cms-bound .fdx26-caveat .fdx26-heading { max-width: var(--f26-xwide); }
#fdx26-cms-bound .fdx26-caveat .fdx26-flow { max-width: 928px; font-size: clamp(22px, 1.46vw, 28px); line-height: 1.43; }
#fdx26-cms-bound .fdx26-caveat .fdx26-flow p { max-width: none; }

/* ============ FAQ — details/summary with cyan ± ============ */
#fdx26-cms-bound .fdx26-faq .fdx26-items { display: block; max-width: var(--f26-faq); margin-left: auto; }
#fdx26-cms-bound .fdx26-faq-item {
  border-bottom: 1px solid var(--f26-hairline);
  padding: 24px 0;
}
#fdx26-cms-bound .fdx26-faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 550;
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.21;                           /* 28/34 */
}
#fdx26-cms-bound .fdx26-faq-question::-webkit-details-marker { display: none; }
#fdx26-cms-bound .fdx26-faq-plus {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--f26-cyan);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  transition: transform .25s ease;
}
#fdx26-cms-bound details[open] .fdx26-faq-plus { transform: rotate(45deg); }
#fdx26-cms-bound .fdx26-faq-item > *:not(summary) { padding-top: 14px; }

/* ============ DARK PANELS (audience / ahead / outlook) ============ */
#fdx26-cms-bound .fdx26-audience,
#fdx26-cms-bound .fdx26-ahead,
#fdx26-cms-bound .fdx26-outlook,
#fdx26-cms-bound .fdx26-closing,
#fdx26-cms-bound .fdx26-dark {
  background: var(--f26-grad);
  color: #fff;
  border-top: 0;
  /* full-bleed regardless of centered inner wrapper */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(var(--f26-margin), calc(50vw - 737px));
  padding-right: max(var(--f26-margin), calc(50vw - 737px));
  padding-top: clamp(80px, 9vw, 180px);
  padding-bottom: clamp(80px, 9vw, 180px);
}
@media (min-width: 992px) {
  #fdx26-cms-bound .fdx26-audience > *,
  #fdx26-cms-bound .fdx26-ahead > *,
  #fdx26-cms-bound .fdx26-outlook > *,
  #fdx26-cms-bound .fdx26-closing > *,
  #fdx26-cms-bound .fdx26-dark > *,
  #fdx26-cms-bound .fdx26-audience > h2.fdx26-heading,
  #fdx26-cms-bound .fdx26-ahead > h2.fdx26-heading,
  #fdx26-cms-bound .fdx26-outlook > h2.fdx26-heading,
  #fdx26-cms-bound .fdx26-closing > h2.fdx26-heading,
  #fdx26-cms-bound .fdx26-dark > h2.fdx26-heading { grid-column: 1 / -1; }
}
#fdx26-cms-bound .fdx26-audience .fdx26-heading,
#fdx26-cms-bound .fdx26-ahead .fdx26-heading,
#fdx26-cms-bound .fdx26-outlook .fdx26-heading,
#fdx26-cms-bound .fdx26-closing .fdx26-heading,
#fdx26-cms-bound .fdx26-dark .fdx26-heading {
  color: #fff;
  font-weight: 700;
  font-size: clamp(56px, 8.33vw, 160px);       /* 160/170 display */
  line-height: 1.06;
  max-width: var(--f26-xwide);
}
#fdx26-cms-bound .fdx26-audience .fdx26-section-number,
#fdx26-cms-bound .fdx26-ahead .fdx26-section-number { color: var(--f26-cyan); }
#fdx26-cms-bound .fdx26-audience .fdx26-item {
  border: 1px solid rgba(230,231,240,.12);
  border-radius: 28px;
  padding: clamp(24px, 2.2vw, 44px);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#fdx26-cms-bound .fdx26-audience .fdx26-item h3 { color: var(--f26-cyan); font-weight: 550; font-size: clamp(28px, 2.29vw, 44px); line-height: 1.18; }
#fdx26-cms-bound .fdx26-audience .fdx26-flow,
#fdx26-cms-bound .fdx26-ahead .fdx26-flow,
#fdx26-cms-bound .fdx26-closing .fdx26-flow { color: #fff; }
#fdx26-cms-bound .fdx26-ahead .fdx26-flow { max-width: 928px; font-size: clamp(20px, 1.46vw, 28px); line-height: 1.43; margin-left: auto; margin-right: auto; }
#fdx26-cms-bound .fdx26-ahead { text-align: center; }
#fdx26-cms-bound .fdx26-ahead .fdx26-heading { margin-left: auto; margin-right: auto; }
#fdx26-cms-bound .fdx26-ahead .fdx26-flow p { max-width: none; }

/* ============ WATERMARK (decorative, per spec §4) ============ */
#fdx26-cms-bound .fdx26-watermark { display: none; }
@media (min-width: 992px) {
  #fdx26-cms-bound .fdx26-editorial .fdx26-watermark,
  #fdx26-cms-bound .fdx26-statement .fdx26-watermark {
    display: block;
    position: absolute;
    z-index: -1;
    bottom: -10%;
    right: -4vw;
    width: min(42vw, 700px);
    aspect-ratio: 1;
    background-image: url(https://cdn.prod.website-files.com/689f4ebf5e4e7ac5f800accd/689f4ebf5e4e7ac5f800acdc_Webclip.png);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .04;
    pointer-events: none;
  }
  #fdx26-cms-bound .fdx26-section { isolation: isolate; overflow: hidden; }
}

/* ============ MOBILE ============ */
@media (max-width: 767px) {
  #fdx26-cms-bound .fdx2-hero { min-height: 88vh; }
  /* mobile frame 406-284: photo visible and crisp at the top,
     gradient takes over beneath it where the title sits */
  #fdx26-cms-bound .fdx2-hero-img {
    filter: none;
    opacity: .92;
    object-position: center top;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.98) 34%, rgba(0,0,0,.45) 52%, rgba(0,0,0,.08) 70%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.98) 34%, rgba(0,0,0,.45) 52%, rgba(0,0,0,.08) 70%);
  }
  #fdx26-cms-bound .fdx26-body::after { display: none; }
  #fdx26-cms-bound .fdx26-faq .fdx26-items { margin-left: 0; }
  #fdx26-cms-bound .fdx26-actions .fdx26-item { padding-right: clamp(20px, 1.8vw, 34px); }
  #fdx26-cms-bound .fdx26-actions-number { position: static; margin-bottom: 14px; }
}

/* ============ STATEMENT — 80px pull-quote block (Figma §5) ============ */
#fdx26-cms-bound .fdx26-statement .fdx26-col { max-width: var(--f26-xwide); }
#fdx26-cms-bound .fdx26-statement-lead {
  font-weight: 550;
  font-size: clamp(26px, 4.17vw, 80px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: var(--f26-xwide);
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}
#fdx26-cms-bound .fdx26-statement-copy {
  font-weight: 500;
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.43;
  max-width: 928px;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ============ RTE noise control ============ */
#fdx26-cms-bound .fdx26-richtext p:empty { display: none; }
#fdx26-cms-bound .fdx26-richtext figure + p:empty { display: none; }

/* ============ BARBA CONTAINER COMPATIBILITY (2026-07-27) ============
   The '26 article now lives INSIDE .main-w — the barba container — so that
   SPA navigations carry it along. Previously it sat outside the container,
   which meant clicking an article from a listing swapped in an empty
   container and rendered a blank page until a manual reload.

   It is appended as the container's LAST child (after the footer), so the
   order is corrected here rather than by fighting the Designer's DOM.
   The legacy sections are hidden the same way, which lets .main-w stay
   permanently visible — required, because a display:none container breaks
   barba's page transitions. */
.main-w:has(> #fdx26-cms-bound:not(.w-condition-invisible)) {
  display: flex;
  flex-direction: column;
}
.main-w:has(> #fdx26-cms-bound:not(.w-condition-invisible)) > #fdx26-cms-bound { order: -1; }
.main-w:has(> #fdx26-cms-bound:not(.w-condition-invisible)) > .section-article-hero,
.main-w:has(> #fdx26-cms-bound:not(.w-condition-invisible)) > .section-article-main,
.main-w:has(> #fdx26-cms-bound:not(.w-condition-invisible)) > .section-article-more { display: none; }

/* ============ KEEP CONTENT CLEAR OF THE HAIRLINE RAIL ============
   The right-hand rail is viewport-anchored (right: clamp(24px, 9.16vw, 176px))
   while the content block is a centred max-width, so the two collide in the
   ~1530–1870px range — the FAQ column (which right-aligns to the inner edge)
   ran underneath it. Cap the inner width so its right edge always stops short
   of the rail; at 1920 the cap exceeds 1474px, so wide layouts are unchanged. */
#fdx26-cms-bound .fdx26-body-inner {
  max-width: min(1474px, calc(100% - 2 * clamp(24px, 9.16vw, 176px) - 32px));
}