.text-wysiwyg {
  display: block;
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}

.text-wysiwyg .no-break {
  white-space: nowrap;
}

/* Figma: Desktop/H2 */
.text-wysiwyg h2 {
  color: var(--color-dark-coral, var(--color-dark-coral));
  font-family: var(--font-tilt-neon);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Callout / display heading */
.text-wysiwyg h3 {
  color: var(--color-dark-coral, var(--color-dark-coral));
  font-family: var(--font-tilt-neon);
  font-size: 28px;
  font-weight: 400;
  /* FND-3: tilt-neon resolves `normal` to 1.57. Explicit or nothing. */
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Figma: Desktop/H4 */
.text-wysiwyg h4 {
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 12px;
}

.text-wysiwyg h5,
.text-wysiwyg h6 {
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 8px;
}

/* Figma: Desktop/Body */
.text-wysiwyg p {
  color: var(--color-charcol, #1d2d3a);
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 1em;
}

.text-wysiwyg p:last-child {
  margin-bottom: 0;
}

/* Figma: Desktop/Footnote */
.text-wysiwyg p.text-footnote,
.text-wysiwyg p.text-footnote a,
.text-wysiwyg ul.text-footnote li,
.text-wysiwyg ol.text-footnote li {
  color: var(--color-steel, #515861);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: var(--size-footnote);
  font-weight: var(--font-weight-normal, 400);
  line-height: normal;
  margin: 0 0 4px;
}

.text-wysiwyg p.text-footnote-charcoal,
.text-wysiwyg p.text-footnote-charcoal a {
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: var(--size-footnote);
  font-weight: var(--font-weight-normal, 400);
  line-height: normal;
  margin: 0 0 4px;
}

.text-wysiwyg p.text-footnote:last-child,
.text-wysiwyg p.text-footnote-charcoal:last-child {
  margin-bottom: 0;
}

.text-wysiwyg p.text-footnote a,
.text-wysiwyg p.text-footnote-charcoal a {
  font-weight: normal;
}

.text-wysiwyg p.text-footnote sup,
.text-wysiwyg p.text-footnote-charcoal sup {
  font-size: 55%;
  margin-left: -6px;
}

.text-wysiwyg span.asterik-sup,
.text-wysiwyg sup.asterik-sup,
.text-wysiwyg p.text-footnote span.asterik-sup,
.text-wysiwyg p.text-footnote-charcoal span.asterik-sup,
.text-wysiwyg p.text-footnote sup.asterik-sup,
.text-wysiwyg p.text-footnote-charcoal sup.asterik-sup {
  font-size: 100%;
  top: 0;
}

.text-wysiwyg.hang-footnote {
  padding-left: 6px;
  margin-left: -6px;
}

.text-wysiwyg.hang-footnote p.text-hang-footnote {
  margin-left: -6px;
}

.text-wysiwyg:has(> p.text-hang-sup) {
  padding-left: 1em;
  margin-left: -1em;
}

.text-wysiwyg p.text-hang-sup {
  position: relative;
  margin-left: 0;
  padding-left: 0;
}

.text-wysiwyg p.text-hang-sup sup {
  position: absolute;
  right: 100%;
  top: 9px;
  padding-right: 1px;
  margin-left: 0;
}

/* Opt in via the Custom classes prop. Empty `<p>&nbsp;</p>` spacer paragraphs
   still occupy a line — remove them from the body when using this. */
.accordion-text-wysiwyg > p,
.accordion-text-wysiwyg > p.text-footnote,
.accordion-text-wysiwyg > p.text-footnote-charcoal {
  margin-bottom: var(--space-md);
}

.accordion-text-wysiwyg > p:last-child {
  margin-bottom: 0;
}

.accordion-text-wysiwyg sup {
  font-size: 55%;
}

.accordion-text-wysiwyg span.asterik-sup,
.accordion-text-wysiwyg sup.asterik-sup {
  font-size: 100%;
  top: 0;
}

/* Opt in via the container css_class prop on FAQ sections. */
.treatment-faqs .accordion__answer .text-wysiwyg > p,
.treatment-faqs .accordion__answer .text-wysiwyg > p.text-footnote,
.administration-faqs .accordion__answer .text-wysiwyg > p,
.administration-faqs .accordion__answer .text-wysiwyg > p.text-footnote,
.continued-support-faqs .accordion__answer .text-wysiwyg > p,
.continued-support-faqs .accordion__answer .text-wysiwyg > p.text-footnote {
  margin-bottom: var(--space-lg);
}

.treatment-faqs .accordion__answer .text-wysiwyg > p:last-child,
.administration-faqs .accordion__answer .text-wysiwyg > p:last-child,
.continued-support-faqs .accordion__answer .text-wysiwyg > p:last-child {
  margin-bottom: 0;
}

/* Accent / primary color utilities */
.text-wysiwyg .text-accent,
.text-wysiwyg p.text-primary,
.text-wysiwyg ul.text-primary li,
.text-wysiwyg ol.text-primary li,
.text-wysiwyg .text-primary {
  color: var(--color-primary, var(--color-nav-active));
}

.text-wysiwyg p.text-gray,
.text-wysiwyg span.text-gray,
.text-wysiwyg ul.text-gray {
  color: var(--color-text-muted, #515861);
}

/* Lists */
.text-wysiwyg ul,
.text-wysiwyg ol {
  margin: 1em 0;
  padding-left: 1.5rem;
}

.text-wysiwyg li {
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 20px;
  line-height: normal;
  margin-bottom: 6px;
}

/* Apply via Styles → "Coral bullets" on a <ul>. */
.text-wysiwyg ul.text-bullets-coral li::marker {
  color: var(--color-coral);
}

/* PSD-15: Key terms panel, Figma nodes 23270:23422 / 23270:27081. */
.text-wysiwyg:has(> ul.key-terms-list) > h3 {
  margin: 0 0 var(--space-lg);
  line-height: 44px;
}

.text-wysiwyg:has(> ul.key-terms-list) > p {
  margin: 0 0 var(--space-md);
}

.text-wysiwyg ul.key-terms-list {
  margin: 0;
  padding-left: 30px;
}

.text-wysiwyg ul.key-terms-list li {
  margin-bottom: var(--space-md);
  line-height: 20px;
}

.text-wysiwyg ul.key-terms-list li:last-child {
  margin-bottom: 0;
}

/* Horizontal rule */
.text-wysiwyg hr {
  border: none;
  height: 1px;
  background: var(--color-rule, var(--color-primary, var(--color-nav-active)));
  margin: 14px 0;
}

/* Inline formatting */
.text-wysiwyg a {
  color: var(--color-dark-coral, var(--color-dark-coral));
  text-decoration: underline;
}

.text-wysiwyg a:hover {
  color: var(--color-primary-dark, var(--color-isi-heading));
}

/* CKEditor button styles — keep `.btn` rules from inheriting link underline. */
.text-wysiwyg a.btn,
.text-wysiwyg a.text-decoration-none {
  text-decoration: none;
}

.text-wysiwyg.btn-min-width a.btn {
  min-width: 213px;
}

.text-wysiwyg a.btn--primary,
.text-wysiwyg a.btn--primary:hover {
  color: var(--color-white);
}

.text-wysiwyg a.btn--outline {
  color: var(--color-coral);
}

.text-wysiwyg a.btn--outline:hover:not(:disabled) {
  color: var(--color-coral);
}

.text-wysiwyg a.btn--link,
.text-wysiwyg a.btn--link:hover {
  color: var(--color-dark-coral, #c94808);
}

.stay-updated-thankyou-container {
  max-width: 100%;
  padding-inline: var(--layout-gutter);
  padding-block: var(--section-margin);
}

.stay-updated-thankyou-container > .text-wysiwyg {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-lg);
  inline-size: min(100%, var(--layout-content));
}

.stay-updated-thankyou-container > .text-wysiwyg > h3 {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-dark-coral);
  font-family: var(--font-tilt-neon);
  font-size: 32px;
  font-weight: var(--font-weight-normal);
  line-height: 1.25;
}

.stay-updated-thankyou-container > .text-wysiwyg > p {
  margin: 0;
  color: var(--color-steel);
}

.stay-updated-thankyou-container > .text-wysiwyg > p:first-of-type {
  flex-basis: 100%;
  margin-bottom: calc(var(--space-2xl) - var(--space-lg));
}

.button-link-left-align {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.text-wysiwyg strong,
.text-wysiwyg b {
  font-weight: 700;
}

.text-wysiwyg em,
.text-wysiwyg i {
  font-style: italic;
}

.text-wysiwyg sub {
  vertical-align: sub;
  font-size: 0.645em;
  font-weight: inherit;
}

/* FND-6: this hardcoded `0.645em` — the right value by the wrong method,
   so it silently stopped tracking the token. It also used the competing
   `vertical-align: super` model. Removed entirely: bare <sup> from Canvas
   and the WYSIWYG now inherits the base contract, which is the point. */

/* Alignment variants (component props) */
.text-wysiwyg--align-left {
  text-align: left;
}

.text-wysiwyg--align-right {
  text-align: right;
}

.text-wysiwyg--align-center {
  text-align: center;
  margin-inline: auto;
}

.text-wysiwyg :is(h2, h3, h4, h5, h6, p):has(> span.m-0) {
  margin: 0;
}

.text-wysiwyg :is(h2, h3, h4, h5, h6, p):has(> span.mb-24) {
  margin-bottom: var(--space-lg);
}

.text-wysiwyg :is(h2, h3, h4, h5, h6, p):has(> span.mb-40) {
  margin-top: var(--section-margin);
  margin-bottom: var(--space-md);
}

.text-wysiwyg span.text-20 {
  font-size: 20px;
}

.text-wysiwyg span.text-26 {
  font-size: 26px;
}

.text-wysiwyg span.text-32 {
  font-size: 32px;
}

.text-wysiwyg span.text-coral {
  color: var(--color-coral);
}

.text-wysiwyg span.text-white {
  color: var(--color-white);
}


.text-wysiwyg span.text-steel {
  color: var(--color-steel, #515861);
}

.text-wysiwyg span.text-charcoal {
  color: var(--color-charcol, #1D2D3A);
}

.text-wysiwyg .text-accent-dark,
.text-wysiwyg span.text-accent-dark,
.text-wysiwyg span.text-coral.text-accent-dark {
  color: var(--color-dark-coral, #c94808);
}

.text-wysiwyg span.text-small-caps {
  /* all-small-caps (not small-caps) so already-uppercase source text like
     "AM"/"PM" is also shrunk — plain small-caps only affects lowercase. */
  font-variant-caps: all-small-caps;
}

/* Coral pill above section titles — default: coral fill, white text. */
.text-wysiwyg p.section-label {
  display: inline-block;
  width: fit-content;
  margin: 0;
  background: var(--color-coral, var(--color-primary));
  border-radius: var(--radius-sm);
  padding: 5px 12px 3px;
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  color: var(--color-white);
}

/* On coral bands — white fill, coral text. Figma 23966:43835 / SDC-7 --inverse. */
.text-wysiwyg p.section-label--inverse {
  background: var(--color-white);
  color: var(--color-coral, var(--color-primary));
}

/* Opt-in white type on coral bands. Base h2/p unchanged elsewhere. */
.text-wysiwyg h2.text-on-coral {
  color: var(--color-white);
}

.text-wysiwyg p.text-on-coral {
  color: var(--color-white);
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  line-height: normal;
}

.text-wysiwyg:has(> p.section-label) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.text-wysiwyg:has(> p.section-label) > :is(h2, h3, h4, h5, h6, p:not(.section-label)) {
  margin: 0;
  width: 100%;
}

.text-wysiwyg:has(> p.text-gap-16) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.text-wysiwyg ul.text-list-stack {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: 20px;

  li {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .text-wysiwyg--align-mobile-left   { text-align: left; }
  .text-wysiwyg--align-mobile-center { text-align: center; }
  .text-wysiwyg--align-mobile-right  { text-align: right; }

  .stay-updated-thankyou-container {
    padding-block: var(--space-2xl);
  }

  .stay-updated-thankyou-container > .text-wysiwyg {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .stay-updated-thankyou-container > .text-wysiwyg > h3 {
    color: var(--color-steel);
    font-size: var(--size-h4);
  }

  .stay-updated-thankyou-container > .text-wysiwyg > p:first-of-type {
    margin-bottom: calc(var(--space-2xl) - var(--space-lg));
  }

  .stay-updated-thankyou-container > .text-wysiwyg a.btn {
    inline-size: 100%;
  }

  /* Canvas often puts heading, body and a CKEditor button in one <p>. Center
     only the button — not text-align on the paragraph, which centers every
     inline span above the link too. */
  .text-wysiwyg:not(.text-wysiwyg--align-mobile-center):not(.text-wysiwyg--align-mobile-right) p:has(> a.btn) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }

  .text-wysiwyg:not(.text-wysiwyg--align-mobile-center):not(.text-wysiwyg--align-mobile-right) p:has(> a.btn) > br {
    display: none;
  }

  .text-wysiwyg:not(.text-wysiwyg--align-mobile-center):not(.text-wysiwyg--align-mobile-right) p:has(> a.btn) > a.btn {
    align-self: center;
    margin-top: 16px;
  }

  .stay-updated-thankyou-container > .text-wysiwyg:not(.text-wysiwyg--align-mobile-center):not(.text-wysiwyg--align-mobile-right) p:has(> a.btn) > a.btn {
    align-self: stretch;
    margin-top: 0;
  }

  .text-wysiwyg[style*="max-width"] {
    max-width: none !important;
  }

  .text-wysiwyg p.text-on-coral {
    font-size: 22px;
  }

  /* Figma: Mobile/H4 + Mobile/Body */
  .text-wysiwyg h2 {
    font-size: 28px;
  }

  .text-wysiwyg h3 {
    font-size: 24px;
  }

  .text-wysiwyg h4 {
    font-size: 22px;
  }

  .text-wysiwyg p,
  .text-wysiwyg li {
    font-size: 20px;
  }

  /* Match accordion question mobile scale (26 → 22). */
  .text-wysiwyg span.text-26 {
    font-size: 22px;
  }

  .text-wysiwyg span.text-32 {
    font-size: 26px;
  }

  .text-wysiwyg:has(> ul.key-terms-list) > h3 {
    line-height: normal;
  }

  .text-wysiwyg:has(> ul.key-terms-list) > p {
    margin-bottom: var(--space-lg);
  }

  .text-wysiwyg :is(h2, h3, h4, h5, h6, p):has(> span.mb-40) {
    margin-top: var(--space-2xl);
  }
}

/* Basic tables */
.text-wysiwyg table {
  width: 100%;
  margin: 1em 0;
  border: 1px solid var(--color-steel, #515861);
  border-collapse: collapse;
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 20px;
  font-weight: var(--font-weight-normal, 400);
  line-height: normal;
  color: var(--color-charcol, #1d2d3a);
  text-align: center;
}

.text-wysiwyg table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-wysiwyg table th,
.text-wysiwyg table td {
  padding: 15px 16px 12px;
  font-weight: var(--font-weight-normal, 400);
  vertical-align: middle;
  border: 1px solid var(--color-steel, #515861);
  color: var(--color-charcol, #1d2d3a);
}

.text-wysiwyg table thead th,
.text-wysiwyg table tbody tr:first-child > th {
  background: var(--color-eee, #eee);
  padding: 16px;
  vertical-align: middle;
}

.text-wysiwyg table thead th:first-child,
.text-wysiwyg table tbody tr:first-child > th:first-child {
  background: var(--color-eee, #eee);
  text-align: left;
}

.text-wysiwyg table thead th:nth-child(2),
.text-wysiwyg table tbody tr:first-child > th:nth-child(2) {
  background: var(--color-coral, var(--color-primary, #f16b50));
  color: var(--color-white, #fff);
  border-color: var(--color-coral, var(--color-primary, #f16b50));
}

.text-wysiwyg table thead th:nth-child(3),
.text-wysiwyg table tbody tr:first-child > th:nth-child(3) {
  background: var(--color-steel, #515861);
  color: var(--color-white, #fff);
  border-color: var(--color-steel, #515861);
}

.text-wysiwyg table thead th:nth-child(4),
.text-wysiwyg table tbody tr:first-child > th:nth-child(4) {
  background: var(--color-eee, #eee);
  color: var(--color-charcol, #1d2d3a);
}

.text-wysiwyg table tbody th:first-child,
.text-wysiwyg table tbody td:first-child {
  text-align: left;
}

.text-wysiwyg table tbody td:nth-child(2),
.text-wysiwyg table tbody th:nth-child(2) {
  border-color: var(--color-coral, var(--color-primary, #f16b50));
}

.text-wysiwyg table tbody td:nth-child(3),
.text-wysiwyg table tbody th:nth-child(3) {
  border-color: var(--color-steel, #515861);
}

/* Mobile reflow — same flex pattern as .data-table (<768) */
@media (max-width: 767.98px) {
  .text-wysiwyg table,
  .text-wysiwyg table thead,
  .text-wysiwyg table tbody {
    display: block;
  }

  .text-wysiwyg table {
    border: 0;
  }

  .text-wysiwyg table:has(thead) tbody {
    border: 1px solid var(--color-steel, #515861);
    border-top: 0;
  }

  .text-wysiwyg table:not(:has(thead)) {
    border-bottom: 1px solid var(--color-steel, #515861);
  }

  .text-wysiwyg table tbody th,
  .text-wysiwyg table tbody td,
  .text-wysiwyg table tbody th:nth-child(n),
  .text-wysiwyg table tbody td:nth-child(n) {
    border: 0;
    border-right: 1px solid var(--color-steel, #515861);
    border-bottom: 1px solid var(--color-steel, #515861);
  }

  .text-wysiwyg table thead th:not(:first-child),
  .text-wysiwyg table:not(:has(thead)) tbody tr:first-child > th:not(:first-child) {
    border: 0;
  }

  .text-wysiwyg table thead th:first-child,
  .text-wysiwyg table:not(:has(thead)) tbody tr:first-child > th:first-child {
    border-top: 1px solid var(--color-steel, #515861);
    border-bottom: 1px solid var(--color-steel, #515861);
  }

  .text-wysiwyg table thead tr,
  .text-wysiwyg table tbody tr {
    display: flex;
    flex-wrap: wrap;
  }

  .text-wysiwyg table thead th,
  .text-wysiwyg table tbody tr:first-child > th {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 5px;
  }

  .text-wysiwyg table thead th:first-child,
  .text-wysiwyg table:not(:has(thead)) tbody tr:first-child > th:first-child {
    order: 2;
    flex: 0 0 100%;
    padding: 16px;
    justify-content: flex-start;
    background: none;
  }

  .text-wysiwyg table tbody td:last-child,
  .text-wysiwyg table tbody th:last-child {
    border-right: 0;
  }

  .text-wysiwyg table tbody th,
  .text-wysiwyg table tbody td {
    flex: 1 1 0;
    min-width: 0;
  }

  .text-wysiwyg table tbody th:first-child,
  .text-wysiwyg table tbody td:first-child,
  .text-wysiwyg table thead + tbody tr th:first-child,
  .text-wysiwyg table thead + tbody tr td:first-child {
    flex: 0 0 100%;
    border-right: 0;
  }

  .text-wysiwyg table thead th:first-child,
  .text-wysiwyg table tbody th:first-child,
  .text-wysiwyg table tbody tr:first-child > th:first-child {
    font-weight: var(--font-weight-bold, 700);
  }

  .text-wysiwyg table tbody tr:last-child > th:not(:first-child),
  .text-wysiwyg table tbody tr:last-child > td:not(:first-child) {
    border-bottom: 0;
  }
}

@media (min-width: 768px) {
  .text-wysiwyg table {
    table-layout: fixed;
  }

  .text-wysiwyg table th,
  .text-wysiwyg table td {
    border-top: 0;
    border-bottom: 0;
  }

  .text-wysiwyg table thead th:first-child,
  .text-wysiwyg table tbody tr:first-child > th:first-child,
  .text-wysiwyg table tbody th:first-child,
  .text-wysiwyg table tbody td:first-child {
    width: 321px;
    border-right-color: var(--color-coral, var(--color-primary, #f16b50));
  }
}

.text-wysiwyg .btn--with-download::after {
  content: '';
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 24px;
  background: url('../../images/icons/download-icon.svg') center / 16px 16px no-repeat;
}

.text-wysiwyg .btn--outline.btn--with-download::after {
  background-image: url('../../images/icons/download-icon-coral.svg');
}

.text-wysiwyg .btn--with-arrow-left::before {
  background-image: url('../../images/icons/chevron-left-dark-coral.svg');
}