/* ============================================================
   REGULATORY-LANDSCAPE OVERVIEW
   ============================================================ */

.reg-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 900px) {
  .reg-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .reg-matrix-grid { grid-template-columns: 1fr; }
}

  .reg-landscape .reg-list {
    margin: var(--heading-intro-gap) 0 0;
    padding: 0;
    list-style: none;
  }

  .reg-landscape .reg-list li {
    display: flex;
    gap: var(--heading-intro-gap);
    align-items: baseline;
    margin-bottom: var(--heading-intro-gap);
    font-size: var(--card-text-size);
    line-height: 1.42;
    color: var(--text);
  }

  .reg-landscape .reg-list li:last-child { margin-bottom: 0; }

  .reg-landscape .reg-flag {
    flex: 0 0 auto;
    min-width: 2.2rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-family: var(--font-sans);
    font-size: var(--minimum-text-size);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .reg-landscape .reg-flag--cal {
    background: var(--sun-wash);
    color: var(--gold-ink);
    border-color: color-mix(in srgb, var(--champagne) 55%, transparent);
  }

  .reg-landscape .reg-auth { color: var(--ink); font-weight: var(--weight-semibold); }

  .reg-landscape .reg-govern {
    margin-bottom: 0;
    color: var(--muted);
    font-style: italic;
  }

  .reg-landscape .fam-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--heading-intro-gap);
    justify-content: center;
    margin: var(--heading-intro-gap) auto var(--card-gap);
  }

  .reg-landscape .fam-chip {
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--minimum-text-size);
    font-weight: var(--weight-semibold);
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .reg-landscape .fam-chip--cosmetics {
    background: var(--orchid-blush);
    border-color: color-mix(in srgb, var(--clay) 45%, transparent);
  }
  .reg-landscape .fam-chip--cleaning {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .reg-landscape .fam-chip--air {
    background: var(--mist-blue);
    border-color: color-mix(in srgb, var(--heading) 45%, transparent);
  }

  .reg-map-overview .key-takeaway {
    margin-top: var(--card-gap);
  }

/* ============================================================
   REGULATORY-GAP CHARTS — stacked two-color bars,
   rows aligned horizontally across both charts
   ============================================================ */

/* Panel grid: both charts share one row skeleton (caption /
   legend / bar / bar / scale note) so bars align across charts */
.reg-gap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--card-gap);
}

.reg-gap-chart {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 6;
  margin: 0;
  font-size: var(--small-text-size);
  line-height: 1.35;
  font-weight: var(--weight-medium);
  color: var(--muted);
}

/* Pin each piece to its shared row; chart 2 has no legend,
   so row 2 stays empty there instead of shifting its bars up */
.reg-gap-cap                { grid-row: 1; }
.reg-gap-legend             { grid-row: 2; }
.reg-gap-row                { grid-row: 3; }
.reg-gap-row + .reg-gap-row { grid-row: 4; }
.reg-gap-scale              { grid-row: 5; }

.reg-gap-cap {
  margin: 0 0 var(--paragraph-gap);
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.35;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--heading);
  text-wrap: balance;
}

/* Legend */
.reg-gap-legend {
  display: flex;
  gap: var(--paragraph-gap);
  margin-bottom: var(--heading-intro-gap);
  font-size: var(--small-text-size);
  line-height: 1.35;
}
.reg-gap-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.reg-gap-swatch {
  width: 0.8em;
  height: 0.8em;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
.reg-gap-swatch--restricted { background: var(--restricted-fill); }

/* Rows: identical fixed columns in both charts so labels,
   tracks, and values all line up */
.reg-gap-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 5.5rem; /* label | track | value */
  align-items: center;
  gap: var(--heading-intro-gap);
  margin-bottom: var(--heading-intro-gap);
}

.reg-gap-label {
  font-size: var(--minimum-text-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Track: pill shape lives here; segments stack inside it */
.reg-gap-track {
  display: flex;
  height: 1.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
  overflow: hidden;
}

/* Segments: square by default — the track's overflow:hidden
   rounds the outer ends. --restricted MUST come after
   .reg-gap-fill so the amber wins the cascade. */
.reg-gap-fill {
  width: var(--w, 0);
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
.reg-gap-fill--restricted {
  background: var(--restricted-fill);
  border-left: 1.5px solid color-mix(in srgb, var(--card-bg) 90%, transparent); /* hairline seam */
}
.reg-gap-fill--min { min-width: 4px; }

.reg-gap-val {
  font-size: var(--small-text-size);
  font-weight: var(--weight-semibold);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.reg-gap-scale {
  margin: var(--heading-intro-gap) 0 0;
  font-size: var(--minimum-text-size);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Mobile: stack the charts, release the shared row skeleton */
@media (max-width: 720px) {
  .reg-gap-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: var(--card-gap);
  }
  .reg-gap-chart { grid-row: auto; grid-template-rows: auto; }
  .reg-gap-cap, .reg-gap-legend, .reg-gap-row,
  .reg-gap-row + .reg-gap-row, .reg-gap-scale { grid-row: auto; }
}

/* =========================================================
   WHERE WE FIND FRAGRANCE — COMPACT PRODUCT CARDS
   ========================================================= */

.what-fragrance-products .card-grid-fragrance {
  width: 100%;
  max-width: calc(var(--header-width) - 4rem);
  margin-inline: auto;
  align-items: start;
}

.what-fragrance-products + .olfactory-adaptation-section {
  margin-top: var(--card-gap);
}

.what-fragrance-products .fragrance-card-image {
  height: auto;
  aspect-ratio: 1.45 / 1;
  margin:
    calc(-1 * var(--card-padding))
    calc(-1 * var(--card-padding))
    var(--heading-intro-gap);
  overflow: hidden;
  border-bottom-right-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  background: transparent;
}

.what-fragrance-products .fragrance-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(4px) scale(1.04);
}

.what-fragrance-products .fragrance-card ul {
  list-style: none;
  margin: var(--heading-intro-gap) 0 0;
  padding: 0;
}


.what-fragrance-products .fragrance-card li {
  position: relative;
  padding-left: 0.85rem;
}

.what-fragrance-products .fragrance-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.54em;
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 68%, transparent);
}

.what-fragrance-products .fragrance-card li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   FRAGRANCE MIXTURE IMAGE
   ========================================================= */

.mixture-panel {
  width: 70%;
  max-width: var(--header-width);
  margin-inline: auto;
}

.fragrance-mixture {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: inherit;
}

.fragrance-mixture img {
  display: block;
  width: 102%;
  max-width: none;
  height: auto;
  margin-left: -1%;
}

@media (max-width: 640px) {
  .mixture-panel {
    width: 92%;
  }
}
   


/* =========================================================
   LABEL / SPLIT IMAGE REFINEMENTS
   ========================================================= */

.image-frame-focus {
  width: 99%;
  max-width: 430px;
  margin: 0 auto;
}

.image-frame-focus img {
  object-fit: contain;
}

/* =========================================================
   REGULATORY LANDSCAPE
   ========================================================= */

.regulatory-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.88fr);
  gap: var(--card-gap);
  align-items: start;
  margin-block: var(--card-gap);
}

.regulatory-intro-grid > .regulatory-card {
  height: auto;
  justify-self: end;
  max-width: 620px;
  border-color: color-mix(in srgb, var(--gold-ink) 34%, transparent);
  background:
    radial-gradient(
      circle at 82% 14%,
      color-mix(in srgb, var(--card-bg) 72%, transparent),
      transparent 13rem
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--card-bg) 88%, var(--sun-wash)),
      color-mix(in srgb, var(--sun-wash) 96%, var(--card-bg))
    );
}

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

.regulatory-card-row + .section-panel {
  margin-top: var(--card-gap);
}

.regulatory-card--full {
  margin-top: var(--card-gap);
}

/* =========================================================
   REAL-WORLD EXPOSURE / PRODUCT LABEL CARDS
   ========================================================= */

.product-label-grid .label-card h3 {
  min-height: 3.2rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .regulatory-card-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .regulatory-intro-grid,
  .regulatory-card-row {
    grid-template-columns: 1fr;
  }

  .regulatory-intro-grid > .regulatory-card {
    justify-self: stretch;
    max-width: none;
  }

  .product-label-grid .label-card h3 {
    min-height: 0;
  }

  .what-fragrance-products .card-grid-fragrance {
    max-width: 34rem;
  }
}


/* =========================================================
   FRAGRANCE INGREDIENTS OF CONCERN — section styles
   Page-specific layout and decorative treatments use the
   shared global spacing, type, color, border, and shadow tokens.
   ========================================================= */

/* ---------- Section panel + decorative orbs ---------- */
.ingredients-concern-panel {
  position: relative;
}
.ingredients-concern-panel::before,
.ingredients-concern-panel::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.ingredients-concern-panel::before {
  width: 24rem; height: 24rem; right: -10rem; top: -10rem;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--lavender-wash) 34%, transparent),
    transparent 68%
  );
}
.ingredients-concern-panel::after {
  width: 22rem; height: 22rem; left: -10rem; bottom: -9rem;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--sage-wash) 30%, transparent),
    transparent 70%
  );
}

/* keep content above the orbs */
.ingredients-concern-intro,
.datapoint-strip-summary,
.ingredients-concern-grid,
.ingredients-card--full-row {
  position: relative;
  z-index: 1;
}


.ingredients-concern-card .ingredient-subsection-title {
  margin: var(--card-gap) 0 var(--heading-intro-gap);
  padding-top: var(--header-content-gap);
  border-top: 1px solid var(--line);
}

/* ---------- Card grid (two columns) ---------- */
.ingredients-concern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--grid-gap);
  margin-top: var(--card-gap);
}

/* ---------- Cards (all four identical except the corner wash) ---------- */

.ingredients-concern-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.ingredients-concern-card--rose {
  background:
    radial-gradient(
      circle farthest-corner at 86% 8%,
      color-mix(in srgb, var(--orchid-blush) 90%, transparent) 0%,
      transparent 100%
    ),
    color-mix(in srgb, var(--card-bg) 88%, transparent);
}
.ingredients-concern-card--lavender {
  background:
    radial-gradient(
      circle farthest-corner at 86% 8%,
      color-mix(in srgb, var(--lavender-wash) 88%, transparent) 0%,
      transparent 100%
    ),
    color-mix(in srgb, var(--card-bg) 88%, transparent);
}
.ingredients-concern-card--sage {
  background:
    radial-gradient(
      circle farthest-corner at 86% 8%,
      color-mix(in srgb, var(--sage-wash) 90%, transparent) 0%,
      transparent 100%
    ),
    color-mix(in srgb, var(--card-bg) 88%, transparent);
}
.ingredients-concern-card--butter {
  background:
    radial-gradient(
      circle farthest-corner at 86% 8%,
      color-mix(in srgb, var(--sun-wash) 92%, transparent) 0%,
      transparent 100%
    ),
    color-mix(in srgb, var(--card-bg) 88%, transparent);
}

/* a second heading inside a card just gets space above it */
.ingredients-concern-card .concern-mini-points + h3 {
  margin-top: var(--card-gap);
}

/* ---------- Concern mini-points ---------- */
.ingredients-concern-card > .concern-mini-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--heading-intro-gap);
}

.ingredients-concern-card
  > .ingredient-chip-grid
  + .concern-mini-points {
  margin-top: var(--paragraph-gap);
}

/* Keep the final mini-note group at the bottom of a stretched card
   without stretching the notes or disrupting inline citations. */
.ingredients-concern-card > .concern-mini-points:last-child {
  margin-top: auto;
  padding-top: var(--paragraph-gap);
}

.ingredients-concern-card > .concern-mini-points > li {
  display: block;
  margin: 0;
  padding: var(--heading-intro-gap);
  border: 1px solid var(--inner-card-border);
  border-radius: var(--radius-md);
  background: var(--inner-card-bg);
  font-size: var(--card-text-size);
  line-height: 1.38;
}

.ingredients-concern-card > .concern-mini-points strong {
  color: var(--heading);
}

/* ---------- Chips + musk tags (shared pill) ---------- */
.ingredients-concern-card > .ingredient-chip-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.42rem;
  margin: var(--paragraph-gap) 0 0;
  padding: 0;
}

.ingredients-concern-card > .ingredient-chip-grid > li,
.musk-tag {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--minimum-text-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}

.ingredients-concern-card > .ingredient-chip-grid > li {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.36rem 0.62rem;
  background: color-mix(in srgb, var(--card-bg) 74%, transparent);
}

.musk-tag {
  display: inline-block;
  margin: 0 0.2rem 0.25rem 0;
  padding: 0.22rem 0.48rem;
  white-space: normal;   /* long names wrap inside the narrower column */
  background: color-mix(in srgb, var(--mist-blue) 42%, transparent); /* default = permitted blue */
}

.ingredients-concern-grid + .ingredients-card--full-row {
  margin-top: var(--card-gap);
}

/* Regulatory color states — apply to both chips and musk tags */
.ingredients-concern-card > .ingredient-chip-grid > li.chip-allergen,
.ingredients-concern-card > .ingredient-chip-grid > li.chip-restricted,
.musk-tag.chip-restricted {
  border-color: var(--restricted-border);
  background: var(--restricted-bg);
  color: var(--restricted-ink);
}
.ingredients-concern-card > .ingredient-chip-grid > li.chip-banned,
.musk-tag.chip-banned {
  border-color: var(--banned-border);
  background: var(--banned-bg);
  color: var(--banned-ink);
}
.ingredients-concern-card > .ingredient-chip-grid > li.chip-allowed {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--mist-blue) 42%, transparent);
  color: var(--ink);
}

/* ---------- Musk mini-table ---------- */
.musk-table-wrap {
  margin-top: var(--paragraph-gap);
}
.musk-mini-table {
  width: 100%;
  table-layout: fixed;   /* column widths below stick; content wraps to fit */
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--inner-card-border);
  border-radius: var(--radius-md);
  background: var(--inner-card-bg);
}

.musk-mini-table th,
.musk-mini-table td {
  padding: var(--header-content-gap);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  text-align: left;
  line-height: 1.38;
}
.musk-mini-table td {
  font-size: var(--card-text-size);   /* match the concern mini-point boxes */
}
.musk-mini-table th {
  font-size: var(--minimum-text-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kicker-teal);
  background: color-mix(in srgb, var(--mist-bg) 72%, transparent);
}
/* Column plan — narrow Musk Group and Examples, wide Why it Matters.
   Requires the table-layout: fixed above; on mobile the stacked-card
   rules reset these widths to auto. */
.musk-mini-table th:nth-child(1),
.musk-mini-table td:nth-child(1) {
  width: 19%;
}

.musk-mini-table th:nth-child(2),
.musk-mini-table td:nth-child(2) {
  width: 30%;
}

.musk-mini-table th:last-child,
.musk-mini-table td:last-child {
  width: 51%;
}
.musk-mini-table tr:last-child td {
  border-bottom: 0;
}

/* Stacked card layout for the musk table on small screens,
   mirroring the health-stat tables on the IAQ page. */
@media (max-width: 720px) {
  .musk-table-wrap .musk-mini-table,
  .musk-table-wrap .musk-mini-table tbody,
  .musk-table-wrap .musk-mini-table tr {
    display: block;
    width: 100%;
  }
  .musk-table-wrap .musk-mini-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .musk-table-wrap .musk-mini-table tr {
    margin: 0 0 var(--paragraph-gap);
    overflow: hidden;
    border: 1px solid var(--inner-card-border);
    border-radius: var(--radius-md);
    background: var(--inner-card-bg);
  }
  .musk-table-wrap .musk-mini-table tr:last-child {
    margin-bottom: 0;
  }
  .musk-table-wrap .musk-mini-table td {
    display: block;
    width: auto;
    padding: var(--header-content-gap);
    border-bottom: 1px solid var(--line-soft);
  }
  .musk-table-wrap .musk-mini-table td:last-child {
    width: auto;            /* override the desktop 50% width */
    border-bottom: 0;
  }
  .musk-table-wrap .musk-mini-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--minimum-text-size);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--kicker-teal);
  }

  /* Let long musk names wrap inside the pill instead of
     overflowing past its border */
  .musk-tag {
    white-space: normal;
  }

  /* Let long ingredient names wrap inside chips instead of
     overflowing past the pill border */
  .ingredients-concern-card > .ingredient-chip-grid > li {
    white-space: normal;
  }
}

/* (Removed: late .ingredients-concern-section td override — cell size
   is now set once at the base .musk-mini-table td rule above.) */

/* ---------- Summary datapoint cards ---------- */
.datapoint-strip-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.datapoint-card-summary {
  position: relative;
  min-height: 9rem;
  overflow: hidden;
}
.datapoint-card-summary::after {
  content: "";
  position: absolute;
  right: -3.5rem; bottom: -4.25rem;
  width: 9rem; height: 9rem;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--mist-blue) 42%, transparent),
      transparent 68%
    );
  pointer-events: none;
}
.datapoint-number {
  margin: 0 0 var(--heading-intro-gap);
}
.datapoint-label {
  display: block;
  color: var(--gold-ink);
}

/* ---------- Responsive (single breakpoint) ---------- */
@media (max-width: 900px) {
  .ingredients-concern-grid,
  .datapoint-strip-summary {
    grid-template-columns: 1fr;
  }
  .ingredients-concern-intro {
    text-align: left;
  }
}


/* =========================================================
   OLFACTORY HABITUATION AND ADAPTATION
   ========================================================= */

.olfactory-adaptation-section .olfactory-adaptation-header {
  max-width: var(--header-width);
}


.olfactory-adaptation-section .olfactory-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.olfactory-adaptation-section .olfactory-point-stack {
  display: contents;
}

/* Shared card structure */
.olfactory-adaptation-section .olfactory-point-card,
.olfactory-adaptation-section .olfactory-reset {
  position: relative;
  overflow: hidden;
}

.olfactory-adaptation-section .olfactory-point-card::after {
  content: "";
  position: absolute;
  right: -3.25rem;
  bottom: -3.5rem;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  pointer-events: none;
}

.olfactory-adaptation-section .olfactory-point-card--familiar::after {
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--mist-blue) 50%, transparent),
      transparent 68%
    );
}

.olfactory-adaptation-section .olfactory-point-card--sensitivity::after {
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--orchid-blush) 55%, transparent),
      transparent 68%
    );
}

.olfactory-adaptation-section .olfactory-point-card > * {
  position: relative;
  z-index: 1;
}

/* Sunshine feature card */
.olfactory-adaptation-section .olfactory-reset {
  border-color: color-mix(in srgb, var(--gold-ink) 34%, transparent);
  background:
    radial-gradient(
      circle at 82% 14%,
      color-mix(in srgb, var(--card-bg) 72%, transparent),
      transparent 13rem
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--card-bg) 88%, var(--sun-wash)),
      color-mix(in srgb, var(--sun-wash) 96%, var(--card-bg))
    );
}

.olfactory-adaptation-section .olfactory-reset::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--champagne) 30%, transparent),
      transparent 68%
    );
  pointer-events: none;
}

.olfactory-adaptation-section .olfactory-reset > * {
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 900px) {
  .olfactory-adaptation-section .olfactory-layout {
    grid-template-columns: 1fr;
  }
}

/* Fragrance-free reset — full-width second row, laid out in two columns:
   heading block on the left, instructions on the right. */
.olfactory-adaptation-section .olfactory-layout .olfactory-reset {
  grid-column: 1 / -1;
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--card-gap);
  align-items: center;
}

.olfactory-reset .olfactory-reset-heading h3 {
  margin-bottom: 0;
}

/* Phones: stack the card's two columns */
@media (max-width: 640px) {
  .olfactory-adaptation-section .olfactory-layout .olfactory-reset {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--heading-intro-gap);
  }
}