/* =========================================================
   IAQ + HEALTH
   Page-specific structure only; shared presentation comes
   from global.css.
   ========================================================= */
  
  .residue-grid > .residue-overview {
    grid-column: 1 / -1;
    background: #fff;
  }
  .residue-grid > .residue-plugins { background: #eef6f8; }
  .residue-grid > .residue-perfume { background: #f4eef8; }
  .residue-grid > .residue-laundry { background: #f4f7f3; }

/* =========================================================
   DRYER VENT EMISSIONS
   ========================================================= */

   
.dryer-vent-row {
  display: grid;
  grid-template-columns: minmax(9.375rem, 0.72fr) minmax(0, 3.28fr);
  gap: var(--card-gap);
  align-items: center;
}

.dryer-vent-media {
  align-self: center;
  min-width: 0;
  width: 100%;
  max-height: 10.3125rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--inner-card-border);
  border-radius: var(--image-radius);
  background: var(--inner-card-bg);
}

.dryer-vent-media img {
  width: 100%;
  height: 10.3125rem;
  object-fit: cover;
}

.dryer-vent-content {
  display: grid;
  grid-template-columns:
    minmax(15.625rem, 1.15fr)
    repeat(2, minmax(10.9375rem, 0.8fr));
  gap: var(--grid-gap);
  align-items: stretch;
  min-width: 0;
}

.dryer-vent-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.dryer-vent-intro h2 {
  margin-bottom: var(--heading-intro-gap);
}

.dryer-vent-intro > p:last-child {
  max-width: 43rem;
  margin-bottom: 0;
  font-size: var(--card-text-size);
  line-height: 1.45;
}

.dryer-vent-stat {
  justify-content: center;
}

.dryer-vent-stat .stat-number {
  margin-top: 0;
}

.dryer-vent-stat p {
  margin: 0;
  font-size: var(--table-text-size);
  line-height: 1.42;
}

@media (max-width: 1050px) {
  .dryer-vent-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dryer-vent-intro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .dryer-vent-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dryer-vent-media {
    max-height: none;
  }

  .dryer-vent-media img {
    height: 13.125rem;
  }
}

@media (max-width: 520px) {
  .dryer-vent-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   VOC ILLUSTRATIONS
   ========================================================= */

.iaq-health-page .voc-products-media {
  align-self: center;
  width: 99%;
  max-width: 25rem;            /* ← smaller default (352px); was 31.25rem */
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--image-radius);
}

.iaq-health-page .voc-products-media__image {
  width: 100%;                 /* image always fills its wrapper */
}

.iaq-health-page .voc-products-media--large {
  max-width: 35rem;            /* ← the larger one (640px) */
}

/* =========================================================
   JAPAN LAUNDRY CASE STUDY
   ========================================================= */

.laundry-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
  margin-top: var(--header-content-gap);
}

.laundry-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.15rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid var(--inner-card-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--muted);
  font-size: var(--small-text-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.025em;
}

.laundry-encapsulation-layout {
  display: grid;
  grid-template-columns: minmax(19rem, 0.55fr) minmax(0, 1.45fr);
  gap: var(--card-gap);
  align-items: center;
}

.laundry-capsule-figure {
  display: grid;
  min-width: 0;
  margin: 0;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.laundry-capsule-image {
  width: min(115%, 27rem);
  margin: -1rem auto -0.35rem;
  object-fit: contain;
}

.laundry-capsule-figure figcaption {
  margin-top: var(--heading-intro-gap);
  color: var(--muted);
  font-size: var(--card-text-size);
  line-height: 1.45;
}

.laundry-encapsulation-copy > h3 {
  margin-bottom: var(--heading-intro-gap);
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
}

.laundry-encapsulation-copy > p:not(.eyebrow) {
  margin: 0;
}

.laundry-pathway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--header-content-gap) 0 0;
  padding: 0;
  list-style: none;
}

.laundry-pathway-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.laundry-pathway-step:nth-child(1) {
  background: var(--sage-bg);
}

.laundry-pathway-step:nth-child(2) {
  background: var(--paper-bg);
}

.laundry-pathway-step:nth-child(3) {
  background: var(--mist-bg);
}

.laundry-step-number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--inner-card-border);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--heading);
  font-size: var(--label-size);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.laundry-pathway-step h4 {
  margin-bottom: var(--heading-intro-gap);
  font-size: var(--card-title-size);
  line-height: 1.18;
}

.laundry-pathway-step p {
  margin: 0;
  font-size: var(--card-text-size);
  line-height: 1.45;
}

.laundry-japan-case {
  margin-top: var(--card-gap);
}

/* The HTML currently uses undefined .panel--paper. */
.laundry-article-panel {
  background: var(--paper-bg);
}

.laundry-article-panel .laundry-case-header {
  max-width: none;
}

.laundry-article-panel .laundry-case-header > h3 {
  max-width: 34ch;
  margin: 0 auto var(--heading-intro-gap);
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  text-align: center;
}

.laundry-article-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-block: var(--card-gap);
}

/* Visual card styling comes from the global .card class. */
.laundry-article-summary-card {
  display: grid;
  grid-template-columns: minmax(14rem, 0.52fr) minmax(0, 1fr);
  column-gap: var(--card-gap);
  align-items: stretch;
}

.laundry-summary-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: var(--card-gap);
  border-right: 1px solid var(--line-soft);
}

.laundry-summary-stat .card-label {
  min-height: 3.2rem;
  margin-bottom: var(--heading-intro-gap);
}

.laundry-card-stat {
  display: block;
  margin: 0 0 var(--heading-intro-gap);
  color: var(--accent-dark);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: var(--weight-regular);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.laundry-summary-stat h3 {
  max-width: 14ch;
  margin: 0;
}

.laundry-summary-copy {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 3.85rem;
}

/* Nested voices panel */
.laundry-article-panel .japan-voices {
  margin: 0;
  padding: var(--card-padding);
  border: 1px solid var(--inner-card-border);
  border-radius: var(--card-radius);
  background: var(--inner-card-bg);
  box-shadow: var(--shadow-card);
}

.japan-voices-header {
  margin: 0 0 var(--heading-intro-gap);
}

.japan-voices-header .eyebrow {
  margin: 0;
}

.japan-voices-intro {
  max-width: 72ch;
  margin: var(--heading-intro-gap) 0 0;
  color: var(--text);
  font-size: var(--card-text-size);
  line-height: 1.5;
}

.japan-quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(24rem, 1.18fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.japan-quote-feature,
.japan-quote-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--inner-card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}

.japan-quote-feature {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.65rem, 2.7vw, 2.25rem);
  background: linear-gradient(
    135deg,
    var(--paper-bg),
    var(--sage-bg)
  );
}

.japan-quote-feature::before,
.japan-quote-card::before {
  content: "“";
  position: absolute;
  color: var(--line);
  font-family: var(--font-serif);
  line-height: 1;
}

.japan-quote-feature::before {
  top: 0.15rem;
  left: 0.75rem;
  font-size: clamp(4rem, 6vw, 5.6rem);
}

/* Feature card leads with an eyebrow: pin content to the top and reserve
   real space for the decorative “ mark. Padding on a *child* only moves the
   copy half as far while justify-content: center is in play. */
.japan-quote-feature:has(> .japan-voices-header) {
  justify-content: flex-start;
  padding-top: calc(clamp(1.65rem, 2.7vw, 2.25rem) + 1.75rem);
}

.japan-quote-feature > .japan-voices-header {
  position: relative;
  z-index: 1;
}

.japan-quote-feature .japan-quote-text {
  position: relative;
  z-index: 1;
  max-width: 27ch;
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.15rem, 1.45vw, 1.4rem);
  font-style: italic;
  line-height: 1.5;
}

.japan-quote-feature footer {
  position: relative;
  z-index: 1;
  margin-top: var(--card-gap);
  color: var(--muted);
  font-size: var(--small-text-size);
  line-height: 1.4;
}

.japan-quote-stack {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--grid-gap);
  min-width: 0;
}

.japan-quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--card-padding);
  background: var(--card-bg);
}

.japan-quote-card::before {
  top: 0.55rem;
  left: 0.55rem;
  font-size: 2.35rem;
}

.japan-quote-card .japan-quote-text {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: 0.35rem;
  color: var(--ink);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  font-style: italic;
  line-height: 1.5;
}

.japan-quote-card footer {
  margin-top: var(--heading-intro-gap);
  padding-top: var(--heading-intro-gap);
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--small-text-size);
  line-height: 1.35;
}

.laundry-response {
  margin-top: var(--grid-gap);
}

.laundry-response > div:first-child .eyebrow {
  width: fit-content;
  margin: 0 auto var(--heading-intro-gap);
  text-align: center;
}

#laundry-response-title {
  max-width: 40ch;
  margin: 0 auto;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.18;
  text-align: center;
}

.laundry-context-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--card-gap);
}

@media (max-width: 1100px) {
  .laundry-encapsulation-layout,
  .laundry-pathway {
    grid-template-columns: minmax(0, 1fr);
  }

  .laundry-capsule-image {
    width: min(100%, 21rem);
  }
}

@media (max-width: 62rem) {
  .laundry-article-summary-grid,
  .japan-quote-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .laundry-article-summary-card {
    grid-template-columns: minmax(13rem, 0.48fr) minmax(0, 1fr);
  }

  .japan-quote-feature .japan-quote-text {
    max-width: 38ch;
  }

  .japan-quote-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (max-width: 48rem) {
  .laundry-article-summary-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .laundry-summary-stat {
    padding-right: 0;
    padding-bottom: var(--header-content-gap);
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .laundry-summary-stat .card-label {
    min-height: 0;
  }

  .laundry-summary-copy {
    padding-top: var(--header-content-gap);
  }

  .japan-quote-stack,
  .laundry-context-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .japan-quote-feature,
  .japan-quote-card {
    padding: var(--card-padding);
  }

  .japan-quote-feature .japan-quote-text {
    max-width: none;
    font-size: clamp(1.15rem, 5vw, 1.38rem);
  }

  /* Shrink the decorative quote marks and clear the text past them */
  .japan-quote-feature::before {
    top: 0.25rem;
    left: 0.5rem;
    font-size: 2.75rem;
  }

  .japan-quote-card::before {
    top: 0.35rem;
    left: 0.45rem;
    font-size: 1.9rem;
  }

  .japan-quote-feature .japan-quote-text,
  .japan-quote-card .japan-quote-text {
    padding-top: 1.6rem;   /* pushes the text below the mark */
    padding-left: 0;
  }

  .japan-quote-feature:has(> .japan-voices-header) {
    padding-top: calc(var(--card-padding) + 1.25rem);
  }

  .japan-quote-feature > .japan-voices-header {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  .laundry-pill-row {
    align-items: stretch;
  }

  .laundry-pill {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* =========================================================
   SHARED IAQ DATA COMPONENTS
   ========================================================= */

.impact-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
  margin-top: var(--header-content-gap);
}

.impact-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.15rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid var(--inner-card-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--small-text-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.035em;
}

.impact-chip--caution {
  border-color: var(--clay);
  background: var(--orchid-blush);
  color: var(--ink);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--header-content-gap);
}

.stat-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-card {
  min-height: 0;
  gap: var(--heading-intro-gap);
}

.stat-card .label {
  display: block;
  color: var(--kicker-teal);
  font-size: var(--minimum-text-size);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-card .number {
  display: block;
  margin: 0.35rem 0 0.45rem;
  color: var(--accent-dark);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.3vw, 2.6rem);
  font-weight: var(--weight-regular);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.flow-wrap,
.data-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.graphic-card {
  padding: 0;
  overflow: hidden;
}

.graphic-card svg {
  display: block;
  width: 100%;
  height: auto;
}

.fragrance-free-split .split-text h2 {
  margin-bottom: var(--heading-intro-gap);
}

.mini-illustration {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--grid-gap);
  align-items: center;
}

.fragrance-free-split article.card { 
  margin-bottom: 1.25rem; 
}

.bubble {
  display: grid;
  min-height: 3.625rem;
  place-items: center;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--ink);
  font-size: var(--small-text-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
}

.bubble.people {
  background: var(--accent-soft);
}

.bubble.air {
  background: var(--mist-blue);
}

.bubble.product {
  background: var(--sun-wash);
}

.plus,
.arrow {
  color: var(--accent-dark);
  font-family: var(--font-serif);
  font-size: var(--card-title-size);
  text-align: center;
}

.so-what {
  margin: var(--header-content-gap) 0 0;
  padding-top: var(--heading-intro-gap);
  border-top: 1px dashed var(--line);
  color: var(--ink);
  font-size: var(--card-text-size);
  line-height: 1.5;
}

.so-what strong {
  color: var(--accent-dark);
}

/* =========================================================
   SENSITIVITY + ACCESS
   ========================================================= */

.sensitivity-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: var(--card-gap);
  align-items: stretch;
}

.sensitivity-lead-card {
  border-color: var(--inner-card-border);
  background: var(--paper-bg);
}

.sensitivity-lead-card h3,
.sensitivity-support-card > h3 {
  margin-bottom: var(--heading-intro-gap);
}

.sensitivity-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.sensitivity-mini-grid h4,
.sensitivity-support-card .soft-callout h4 {
  margin-bottom: var(--heading-intro-gap);
}

.sensitivity-support-card .soft-callout p {
  margin: 0;
  font-size: var(--card-text-size);
  line-height: 1.45;
}

.sensitivity-lead-card { 
  display: flex; flex-direction: column; 
} 

.sensitivity-lead-card .sensitivity-example { 
  margin-bottom: 1.5rem; 
} 

.sensitivity-lead-card > :last-child { 
  margin-top: auto; 
}

.sensitivity-support-card {
  display: flex;
  flex-direction: column;
}

.sensitivity-support-card > .soft-callout {
  flex: 1;
}

.sensitivity-support-card > .soft-callout {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.health-vocs-section .section-panel-white > h3 {
  margin-bottom: var(--heading-intro-gap);
}

.health-vocs-section .source-note {
  margin-top: var(--header-content-gap);
  color: var(--muted);
  font-size: var(--table-text-size);
}

/* =========================================================
   HEALTH TABLES
   ========================================================= */

.health-vocs-table-wrap {
  overflow: hidden;
  border: 1px solid var(--inner-card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}

.health-vocs-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--table-text-size);
  line-height: 1.55;
}

.health-vocs-table th,
.health-vocs-table td {
  padding: 0.46rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: break-word;
}

.health-vocs-table th {
  background: var(--sage-bg);
  color: var(--accent-dark);
  font-size: var(--minimum-text-size);
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.health-vocs-table td {
  font-size: var(--table-text-size);
  line-height: 1.4;
}

.health-vocs-table tr:last-child td {
  border-bottom: 0;
}

table[aria-label="Reported adverse health effects general population"]
  :is(th, td):first-child {
  width: 68%;
}

/* Column widths for desktop table layout only —
   on mobile these tables become stacked cards. */
@media (min-width: 721px) {
  table[aria-label="Societal access effects"] :is(th, td):first-child {
    width: 46%;
  }

  table[aria-label="Product emissions studies"] :is(th, td):nth-child(1) {
    width: 27%;
  }

  table[aria-label="Product emissions studies"] :is(th, td):nth-child(2) {
    width: 20%;
  }

  table[aria-label="Product emissions studies"] :is(th, td):nth-child(3) {
    width: 27%;
  }

  table[aria-label="Product emissions studies"] :is(th, td):nth-child(4) {
    width: 26%;
  }
}

table[aria-label="Reported adverse health effects general population"] .pct {
  display: inline-block;
  min-width: 4.5ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chemical-intolerance-title {
  margin-top: var(--card-gap);
  padding-top: var(--card-gap);
  border-top: 1px solid var(--line-soft);
}

/* =========================================================
   QUALITY-OF-LIFE IMPACT
   ========================================================= */

.impact-note {
  max-width: 52rem;
  margin-inline: auto;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--muted);
  font-size: var(--small-text-size);
  line-height: 1.45;
  text-align: center;
}

.impact-note strong {
  color: var(--ink);
}

.impact-story-grid,
.impact-settings,
.impact-framing {
  margin-top: var(--grid-gap);
}

.impact-note + .stat-grid {
  margin-top: var(--grid-gap);
}

.impact-mini-stats {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--header-content-gap);
}

.impact-mini-stat {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);   /* was 6.25rem */
  gap: var(--grid-gap);
  align-items: baseline;
  padding-top: var(--heading-intro-gap);
  border-top: 1px solid var(--line-soft);
}

.impact-mini-stat strong {
  padding-left: 0.4rem;
}

.impact-mini-stat strong {
  color: var(--accent-dark);
  font-family: var(--font-serif);
  font-size: var(--card-title-size);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: -0.02em;
}

.impact-mini-stat span {
  color: var(--text);
  font-size: var(--card-text-size);
  line-height: 1.4;
}

.impact-settings {
  padding-top: var(--header-content-gap);
  border-top: 1px solid var(--line-soft);
}

.impact-settings-header,
.impact-framing-header {
  text-align: center;
}

.impact-settings-header h3,
.impact-framing-header h3 {
  margin-bottom: var(--heading-intro-gap);
}

.impact-settings-grid {
  margin: var(--header-content-gap) auto 0;
}

.impact-settings-grid .stat-card {
  text-align: center;
}

.impact-framing-header {
  max-width: var(--content-width);
  margin-inline: auto;
}

.impact-framing-grid {
  margin-top: var(--header-content-gap);
}

/* =========================================================
   RESPONSIVE DATA + HEALTH LAYOUTS
   ========================================================= */

@media (min-width: 901px) {
  #fragrance-health-effects .split {
    grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
  }
}

@media (min-width: 960px) {
  #fragrance-health-effects .panel--mist .grid--auto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sensitivity-compact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Only the two wide, multi-column tables become stacked cards. */
@media (max-width: 720px) {
  .health-vocs-table-wrap {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ),
  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ) :is(thead, tbody, tr, th, td) {
    display: block;
    width: 100%;
  }

  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ) tr {
    margin-bottom: var(--grid-gap);
    overflow: hidden;
    border: 1px solid var(--inner-card-border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
  }

  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ) td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 35%) minmax(0, 1fr);
    gap: var(--heading-intro-gap);
    padding: 0.68rem 0.78rem;
    border-bottom: 1px solid var(--line-soft);
  }

  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ) td::before {
    content: attr(data-label);
    color: var(--accent-dark);
    font-size: var(--minimum-text-size);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ) :is(tr:last-child td, td:last-child) {
    border-bottom: 0;
  }

  /* Keep the compact two-column tables in table form. */
  :is(
    table[aria-label="Reported adverse health effects general population"],
    table[aria-label="Most reported chemical intolerance initiators"]
  ) {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--inner-card-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    table-layout: fixed;
  }

  table[aria-label="Reported adverse health effects general population"]
    :is(th, td):nth-child(1) {
    width: 68%;
  }

  table[aria-label="Reported adverse health effects general population"]
    :is(th, td):nth-child(2) {
    width: 32%;
    text-align: right;
  }

  table[aria-label="Most reported chemical intolerance initiators"]
    :is(th, td):nth-child(1) {
    width: 70%;
  }

  table[aria-label="Most reported chemical intolerance initiators"]
    :is(th, td):nth-child(2) {
    width: 30%;
    text-align: right;
  }
}

@media (max-width: 680px) {
  .mini-illustration {
    grid-template-columns: minmax(0, 1fr);
  }

  .plus,
  .arrow {
    transform: rotate(90deg);
  }
}

/* Flow diagram: below ~820px the SVG scales its labels too small
   to read — hold a readable minimum width and scroll horizontally. */
@media (max-width: 820px) {
  .graphic-card {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .graphic-card svg {
    min-width: 37.5rem;
  }
}

@media (max-width: 640px) {
  .sensitivity-mini-grid,
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .impact-mini-stat {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  :is(
    table[aria-label="Societal access effects"],
    table[aria-label="Product emissions studies"]
  ) td {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

.col-70 {
  width: 70%;
}

.col-30 {
  width: 30%;
}

.small-text--note {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

/* ---------------------------------------------------------
   MEDICAL PROFESSIONAL NOTE
   --------------------------------------------------------- */

.medical-note {
  display: grid;
  grid-template-columns:
    minmax(0, 18rem)
    minmax(18rem, 1.25fr)
    minmax(15rem, 0.8fr);
  gap: var(--card-gap);
  align-items: stretch;
  max-width: 82rem;
  margin-inline: auto;
}

/* Image column */
.medical-note-image {
  width: min(100%, 18rem);
  margin-inline: auto;
  align-self: center;
  overflow: hidden;
  border-radius: var(--image-radius);
  line-height: 0;
}

.medical-note-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* Middle text column */
.medical-note-copy {
  min-width: 0;
  padding-block: var(--heading-intro-gap);
}

.medical-note-copy h2 {
  margin-bottom: var(--paragraph-gap);
}

.medical-note-copy p {
  max-width: 34rem;
}

.medical-note-copy strong {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

/* Right AMA column and vertical divider */
.medical-note-policy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--heading-intro-gap);

  min-width: 0;
  margin: 0;
  padding:
    var(--header-content-gap)
    0
    var(--header-content-gap)
    var(--card-gap);

  border-top: 0;
  border-left: 1px solid var(--line-soft);

  font-size: var(--card-text-size);
  line-height: 1.5;
  color: var(--muted);
}

.medical-note-policy a {
  font-weight: var(--weight-semibold);
}

/* Two columns on smaller desktops and tablets */
@media (max-width: 1100px) {
  .medical-note {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  }

  .medical-note-image {
    grid-row: 1 / span 2;
    width: min(100%, 17rem);
  }

  .medical-note-policy {
    grid-column: 2;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding:
      var(--header-content-gap)
      0
      0;
  }
}

/* One column on phones */
@media (max-width: 700px) {
  .medical-note {
    grid-template-columns: 1fr;
  }

  .medical-note-image {
    grid-row: auto;
    width: min(100%, 16rem);
  }

  .medical-note-copy,
  .medical-note-policy {
    grid-column: 1;
  }
}

/* =========================================================
   MOBILE FIX — health table headings
   The shared cell rule applies overflow-wrap: break-word,
   which splits long uppercase headings mid-word on phones
   ("General population average", "Reported"). Wrap between
   words instead, and give the narrow numeric columns enough
   room for their headings. Must stay at the end of this file
   so it overrides the earlier table rules.
   ========================================================= */

@media (max-width: 720px) {
  .health-vocs-table th {
    font-size: 0.72rem;       /* a touch smaller than the desktop heading */
    line-height: 1.3;
    letter-spacing: 0.04em;   /* tighter tracking so words fit before wrapping */
    overflow-wrap: normal;    /* wrap between words, never inside a word */
    hyphens: none;
    text-wrap: balance;       /* even lines: "General population" / "average" */
    vertical-align: bottom;   /* keeps headings aligned when one wraps */
  }

  /* Health effects table: rebalance 68/32 → 62/38 */
  table[aria-label="Reported adverse health effects general population"]
    :is(th, td):nth-child(1) {
    width: 62%;
  }

  table[aria-label="Reported adverse health effects general population"]
    :is(th, td):nth-child(2) {
    width: 38%;
  }

  /* Initiating exposures table: rebalance 70/30 → 66/34 */
  table[aria-label="Most reported chemical intolerance initiators"]
    :is(th, td):nth-child(1) {
    width: 66%;
  }

  table[aria-label="Most reported chemical intolerance initiators"]
    :is(th, td):nth-child(2) {
    width: 34%;
  }
}

/* Mobile: make it obvious the flow diagram scrolls sideways */
@media (max-width: 820px) {
  /* 1. Right-edge fade, overlaid from the wrapper
        (the SVG's own background would hide a fade painted on the scroller) */
  .flow-wrap {
    position: relative;
  }

  .flow-wrap::after {
    content: "";
    position: absolute;
    inset: 1px 1px 1px auto;                 /* hug the panel's right edge */
    width: 3.25rem;
    border-radius: 0 var(--card-radius) var(--card-radius) 0;
    background: linear-gradient(to left, rgb(255 255 255 / 0.95) 15%, transparent);
    pointer-events: none;
  }

  /* 2. Keep the scrollbar visible — iOS hides overlay scrollbars,
        but styling ::-webkit-scrollbar forces it to render */
  .graphic-card {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }

  .graphic-card::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 8px;
  }

  .graphic-card::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
  }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 820px) {
    .graphic-card { scroll-timeline: --flow-x x; }
    .flow-wrap { timeline-scope: --flow-x; }

    .flow-wrap::after {
      animation: flow-fade-out linear both;
      animation-timeline: --flow-x;
    }

    @keyframes flow-fade-out {
      0%, 80% { opacity: 1; }
      100%    { opacity: 0; }
    }
  }
}