.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-agenda, "Agenda", Arial, sans-serif);
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
  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, "Tilt Neon", Georgia, serif);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  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: 20px;
  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-charcol, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 16px;
  line-height: normal;
  margin-bottom: 4px;
}

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

.text-wysiwyg p.text-footnote-hanging,
.text-wysiwyg p.text-footnote-hanging a {
  position: relative;
  padding-left: 8px;
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 16px;
  line-height: normal;
  margin-bottom: 4px;
}

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


.text-wysiwyg.no-anchor-padding a,
.text-wysiwyg.no-anchor-padding p.text-footnote-hanging a {
  padding-left: 0;
}

.text-wysiwyg:has(> p.text-footnote-hanging) > p.text-footnote {
  padding-left: 8px;
}

.text-wysiwyg p.text-footnote-hanging > sup:first-of-type,
.text-wysiwyg p.text-footnote-hanging > span:first-child > sup:first-of-type {
  position: absolute;
  left: 0;
  top: 6px;
}

.text-wysiwyg.footnote-asterik-layout p.text-footnote-hanging {
  display: block;
  padding-left: 0;
}

.text-wysiwyg.footnote-asterik-layout p.text-footnote-hanging .asterik-sup {
  position: absolute;
  left: -7px !important;
  top: 0 !important;
  font-size: 1em;
  line-height: normal;
  vertical-align: baseline;
}

.text-wysiwyg.neon-pipe-content-alignment {
  padding-left: 26px;
  padding-top: 16px;
  padding-bottom: 4px;
}

@media (max-width: 1024px) {
  .text-wysiwyg.neon-pipe-content-alignment {
    padding-left: 22px;
  }
}

@media (max-width: 767px) {
  .text-wysiwyg.neon-pipe-content-alignment {
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 10px;
  }
}

/* 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 span.font-large,
.text-wysiwyg p.font-large {
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.text-wysiwyg p.font-large {
  margin: 0 0 1em;
}

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

.text-wysiwyg span.font-xl,
.text-wysiwyg p.font-xl {
  font-family: var(--font-agenda);
  font-size: var(--fs-28, 28px);
  line-height: normal;
  font-feature-settings: "liga" 0;
}

.text-wysiwyg span.font-24,
.text-wysiwyg p.font-24 {
  color: var(--color-charcoal, #1d2d3a);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}

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

.text-wysiwyg span.coral-greater-equal {
    display: inline-block;
    color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.54 6.64'%3E%3Cpath fill='%23bb5844' d='M2.61,6.64H.61c-.2,0-.35-.05-.46-.16s-.16-.23-.16-.38.05-.27.16-.38.26-.16.46-.16h3.31c.21,0,.36.05.46.16s.15.23.15.38-.05.27-.15.38-.25.16-.46.16h-1.31ZM1.23,3.63c.28-.16.56-.33.84-.48s.53-.32.77-.46c.08-.05.13-.08.16-.1.02-.02.02-.03-.01-.05-.03-.02-.09-.05-.18-.1-.18-.1-.38-.22-.58-.34-.2-.12-.4-.24-.61-.37-.2-.12-.4-.25-.6-.37-.2-.12-.39-.23-.57-.34-.18-.1-.28-.23-.31-.38-.03-.15,0-.28.07-.4.08-.12.18-.2.32-.25s.3-.01.47.09c.18.1.37.21.56.32.19.11.4.23.62.37.22.13.47.28.75.45s.59.36.95.59c.26.16.44.33.52.5.08.18.08.35,0,.51-.08.16-.24.31-.47.44-.37.2-.69.39-.98.56-.28.17-.54.33-.77.47-.23.14-.44.27-.63.39s-.38.24-.56.35c-.18.1-.33.13-.47.09s-.25-.13-.32-.25c-.08-.12-.1-.25-.07-.4.03-.15.14-.27.31-.38.24-.14.51-.3.79-.46Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 0.5rem;
    padding-bottom: 2px;
}

.text-wysiwyg span.greater-equal {
  display: inline-block;
  transform: scale(0.75);
  position: relative;
  top: 1px;
}

/* Single-axis type utilities — compose freely with each other and with
 * the colour utilities above (e.g. font-tilt-neon + font-20 + text-dark-coral). */
.text-wysiwyg span.font-tilt-neon,
.text-wysiwyg p.font-tilt-neon {
  font-family: var(--font-tilt-neon, "Tilt Neon", Georgia, serif);
}

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

.text-wysiwyg span.font-size-30,
.text-wysiwyg p.font-size-30 {
  font-size: 30px;
  line-height: normal;
}

.text-wysiwyg span.font-16,
.text-wysiwyg p.font-16 {
  font-size: 16px;
  font-weight: 400;
}

.text-wysiwyg span.font-normal,
.text-wysiwyg p.font-normal {
  font-weight: 400;
}

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

/* Modal content utilities — reusable across any modal dialog. */
.text-wysiwyg p.text-modal-col-label {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  text-align: center;
}

.text-wysiwyg p.text-modal-stat,
.text-wysiwyg p.text-modal-stat-coral,
.text-wysiwyg p.text-modal-stat-dark-coral {
  margin: 0;
  font-family: var(--font-tilt-neon);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.text-wysiwyg p.text-modal-stat-coral {
  color: var(--color-coral);
}

.text-wysiwyg p.text-modal-stat-dark-coral {
  color: var(--color-dark-coral);
}

.text-wysiwyg p.text-modal-col-detail {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: var(--font-weight-normal);
  line-height: normal;
  text-align: center;
}

.text-wysiwyg p.text-modal-footnote-line {
  margin: 0;
  color: var(--color-charcoal);
  font-family: var(--font-agenda);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: normal;
}

/* 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;
}

/* Coral bullets — apply via Styles → "Coral bullets" on a <ul>. */
.text-wysiwyg ul.text-bullets-coral {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

.text-wysiwyg ul.text-bullets-coral li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 19px;
}

.text-wysiwyg ul.text-bullets-coral li:last-child {
  margin-bottom: 0;
}

.text-wysiwyg ul.text-bullets-coral li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  color: var(--color-coral, #f16b50);
  font-size: 20px;
  line-height: normal;
}

/* Coral circle bullets — hollow 6px ring for nested sub-points (Figma
 * safety frame: sibling row indented 19px under a disc bullet). Apply via
 * Styles → "Coral circle bullets" on the nested <ul>. */
.text-wysiwyg ul.text-bullets-coral-circle {
  margin: 12px 0 0;
  padding: 0 0 0 19px;
  list-style: none;
}

.text-wysiwyg ul.text-bullets-coral-circle li {
  position: relative;
  margin: 0;
  padding-left: 19px;
}

.text-wysiwyg ul.text-bullets-coral-circle li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--color-coral, #f16b50);
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
}

.text-wysiwyg ul.text-bullets-coral-flat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-wysiwyg ul.text-bullets-coral-flat li {
  position: relative;
  margin: 0;
  padding-left: 19px;
}

.text-wysiwyg ul.text-bullets-coral-flat li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  color: var(--color-coral, #f16b50);
  font-size: 20px;
  line-height: normal;
}

@media (max-width: 767px) {

  .text-wysiwyg ul.text-bullets-coral-flat {
    gap: 12px;
  }

}

/* 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));
}

.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;
}

.text-wysiwyg sup.asterik-sup {
  position: relative;
  top: 9px !important;
  font-size: 100%;
  vertical-align: baseline;
}

/* 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;
}

@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; }

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

  /* 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;
  }
}

/* Tables — Safety AE grid (desktop 4-col / mobile stacked) */
.text-wysiwyg table {
  width: 100%;
  margin: 0 0 24px;
  table-layout: fixed;
  border: 1px solid var(--color-coral, #eb6f56);
  border-radius: var(--radius-xl, 16px);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--color-white, #fff);
  font-family: var(--font-agenda, "Agenda", Arial, sans-serif);
  font-size: 20px;
  line-height: normal;
  color: var(--color-charcol, #1d2d3a);
  text-align: center;
}

.text-wysiwyg table caption {
  caption-side: top;
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-charcol, #1d2d3a);
  text-align: center;
}

/* CKEditor wraps cells in <p> — don't inherit body paragraph margins. */
.text-wysiwyg table p {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.text-wysiwyg table thead tr:first-child > :first-child,
.text-wysiwyg table > tbody:first-child > tr:first-child > :first-child {
  border-top-left-radius: calc(var(--radius-xl, 16px) - 1px);
}

.text-wysiwyg table thead tr:first-child > :last-child,
.text-wysiwyg table > tbody:first-child > tr:first-child > :last-child {
  border-top-right-radius: calc(var(--radius-xl, 16px) - 1px);
}

.text-wysiwyg table tbody tr:last-child > :first-child {
  border-bottom-left-radius: calc(var(--radius-xl, 16px) - 1px);
}

.text-wysiwyg table tbody tr:last-child > :last-child {
  border-bottom-right-radius: calc(var(--radius-xl, 16px) - 1px);
}

.text-wysiwyg table th,
.text-wysiwyg table td {
  height: 51px;
  padding: 0 16px;
  font-weight: 400;
  vertical-align: middle;
  border: 0;
  color: var(--color-charcol, #1d2d3a);
  background: var(--color-white, #fff);
}

/* Header row (thead, or first tbody row when there is no thead) — desktop 80px */
.text-wysiwyg table thead :is(th, td),
.text-wysiwyg table > tbody:first-child > tr:first-child > :is(th, td) {
  height: 80px;
  padding: 15px 16px 12px;
  text-align: center;
  background: var(--color-eee, #eee);
  color: var(--color-charcol, #1d2d3a);
}

.text-wysiwyg table thead :is(th, td):first-child,
.text-wysiwyg table > tbody:first-child > tr:first-child > :is(th, td):first-child {
  width: 321px;
  text-align: left;
}

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

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

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

/* Body row labels */
.text-wysiwyg table thead + tbody :is(th, td):first-child,
.text-wysiwyg table > tbody:first-child > tr:not(:first-child) > :is(th, td):first-child {
  text-align: left;
}

/* Column rules */
.text-wysiwyg table thead + tbody :is(th, td):nth-child(2),
.text-wysiwyg table > tbody:first-child > tr:not(:first-child) > :is(th, td):nth-child(2) {
  border-left: 1px solid var(--color-nav-active, #f16b50);
  border-right: 1px solid var(--color-nav-active, #f16b50);
}

.text-wysiwyg table thead + tbody :is(th, td):nth-child(3),
.text-wysiwyg table > tbody:first-child > tr:not(:first-child) > :is(th, td):nth-child(3) {
  border-right: 1px solid var(--color-steel, #515861);
}

/* Mobile — stacked: treatment headers, then label, then each row as label + 3 values */
@media (max-width: 1023.98px) {
  .text-wysiwyg table,
  .text-wysiwyg table thead,
  .text-wysiwyg table tbody {
    display: block;
  }

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

  .text-wysiwyg table th,
  .text-wysiwyg table td {
    height: auto;
    width: auto;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #d8d8d8;
  }

  .text-wysiwyg table thead tr:first-child > :first-child,
  .text-wysiwyg table > tbody:first-child > tr:first-child > :first-child,
  .text-wysiwyg table tbody tr:last-child > :first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  /* Treatment headers (Q4W / Q8W / Placebo) — mobile 93px */
  .text-wysiwyg table thead :is(th, td),
  .text-wysiwyg table > tbody:first-child > tr:first-child > :is(th, td) {
    flex: 1 1 0;
    min-width: 0;
    height: 93px;
    padding: 15px 4px 12px;
  }

  /* "Adverse reaction, n (%)" — full-width row under treatment headers. */
  .text-wysiwyg table thead :is(th, td):first-child,
  .text-wysiwyg table > tbody:first-child > tr:first-child > :is(th, td):first-child {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    height: 51px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .text-wysiwyg table thead :is(th, td):nth-child(2),
  .text-wysiwyg table > tbody:first-child > tr:first-child > :is(th, td):nth-child(2) {
    border-top-left-radius: calc(var(--radius-xl, 16px) - 1px);
  }

  .text-wysiwyg table thead :is(th, td):last-child,
  .text-wysiwyg table > tbody:first-child > tr:first-child > :is(th, td):last-child {
    border-top-right-radius: calc(var(--radius-xl, 16px) - 1px);
  }

  .text-wysiwyg table thead + tbody :is(th, td),
  .text-wysiwyg table > tbody:first-child > tr:not(:first-child) > :is(th, td) {
    flex: 1 1 0;
    min-width: 0;
    padding: 15px 4px 12px;
    text-align: center;
    font-weight: 400;
    background: var(--color-white, #fff);
  }

  .text-wysiwyg table thead + tbody :is(th, td):first-child,
  .text-wysiwyg table > tbody:first-child > tr:not(:first-child) > :is(th, td):first-child {
    flex: 0 0 100%;
    width: 100%;
    padding: 15px 16px 12px;
    text-align: center;
  }

  .text-wysiwyg table thead + tbody :is(th, td):nth-child(2),
  .text-wysiwyg table > tbody:first-child > tr:not(:first-child) > :is(th, td):nth-child(2) {
    border-left: 0;
    border-right: 1px solid var(--color-nav-active, #f16b50);
  }

  .text-wysiwyg table thead + tbody :is(th, td):nth-child(3),
  .text-wysiwyg table > tbody:first-child > tr:not(:first-child) > :is(th, td):nth-child(3) {
    border-right: 1px solid var(--color-steel, #515861);
  }

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

  .text-wysiwyg table tbody tr:last-child > :nth-child(2) {
    border-bottom-left-radius: calc(var(--radius-xl, 16px) - 1px);
  }

  .text-wysiwyg table tbody tr:last-child > :last-child {
    border-bottom-right-radius: calc(var(--radius-xl, 16px) - 1px);
  }

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