/* Balanced interior artwork and readable policy information, in the original rose palette. */
.online-policy .section-heading[id] {
  scroll-margin-top: calc(var(--header-height) + var(--op-jump-height, 76px) + 24px);
}

.interior-page .has-visual .interior-hero-main,
.online-policy .op-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.interior-page .interior-hero-art,
.interior-page.interior-index .interior-hero-art,
.online-policy .op-visual-art {
  width: 100%;
  max-width: 360px;
  height: auto;
  max-height: 203px;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 3px solid #ffffffc9;
  border-radius: 18px;
  background: #fff0f5;
  box-shadow: 0 10px 28px #bc28580d;
}

.interior-page .interior-hero-art > img,
.online-policy .op-visual-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.online-policy .op-hero-visual {
  display: block;
  align-self: center;
  padding: 0 0 20px;
  min-width: 0;
}

.interior-page .interior-route-grid:has(> .interior-learning-card) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.interior-page .interior-learning-card {
  padding: 0;
  border-radius: 17px;
  width: 100%;
  max-width: 360px;
  justify-self: center;
}

.interior-page .interior-learning-art {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.interior-page .interior-learning-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.interior-page .interior-learning-copy {
  padding: 19px 20px 18px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.interior-page .interior-learning-copy .interior-card-title,
.interior-page .interior-learning-copy h3 {
  font: 600 18px/1.5 var(--font);
  letter-spacing: -.2px;
  color: #38252d;
  margin: 0 0 11px;
  overflow-wrap: normal;
  text-wrap: pretty;
}

.interior-page .interior-learning-copy p {
  color: #66555e;
  font-size: 13px;
  line-height: 1.85;
  margin: 0 0 18px;
}

.interior-page .interior-learning-copy .interior-route-label {
  font-size: 12px;
  line-height: 1.6;
  margin-top: auto;
  padding-top: 13px;
}

.lesson-v11-intro {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 26px;
}

.lesson-v11-intro .lesson-v11-illustration {
  width: 100%;
  max-height: 203px;
  border-radius: 17px;
}

.online-policy .op-tier-explorer {
  grid-template-columns: minmax(200px, 245px) minmax(0, 1fr);
  border-radius: 20px;
  background: linear-gradient(125deg, #241920, #38232d);
}

.online-policy .op-tier-selector,
.online-policy .op-tier-summary,
.online-policy .op-tier-requirements,
.online-policy .op-tier-rewards,
.online-policy .op-tier-rewards > div {
  min-width: 0;
}

.online-policy .op-tier-selector {
  padding: 24px;
}

.online-policy .op-tier-selector label {
  font: 600 14px/1.7 var(--font);
  color: #ffe1eb;
  margin-bottom: 13px;
}

.online-policy .op-tier-selector select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 34px 10px 14px;
  border-radius: 10px;
  border-color: #ffffff42;
  font: 600 15px/1.6 var(--font);
  color: #fff;
  background-color: #ffffff0f;
  text-overflow: clip;
}

.online-policy .op-tier-selector p {
  max-width: none;
  color: #ded3d9;
  font-size: 12px;
  line-height: 1.8;
  margin-top: 14px;
}

.online-policy .op-tier-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 21px;
  padding: 24px 28px;
}

.online-policy .op-tier-requirements {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: center;
  margin: 0;
}

.online-policy .op-tier-label {
  font: 500 12px/1.7 var(--font);
  color: #e6d9e0;
  margin: 0;
}

.online-policy .op-tier-requirements > div {
  min-width: 0;
}

.online-policy .op-tier-requirements strong {
  color: #fff;
  font: 700 30px/1.2 var(--display);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.online-policy .op-tier-requirements div > span,
.online-policy .op-tier-requirements p {
  font: 400 12px/1.8 var(--font);
  color: #e6d9e0;
  margin: 3px 0 0;
  white-space: normal;
}

.online-policy .op-tier-requirements p > span {
  color: #deafbf;
}

.online-policy .op-tier-rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid #ffffff20;
  padding-top: 20px;
  align-items: stretch;
}

.online-policy .op-tier-rewards > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  background: #ffffff06;
  white-space: normal;
}

.online-policy .op-tier-rewards > div > span {
  color: #e6d9e0;
  font: 400 12px/1.7 var(--font);
}

.online-policy .op-tier-rewards strong {
  color: #fff;
  font: 600 clamp(20px, 2vw, 24px)/1.4 var(--display);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: normal;
}

.online-policy .op-tier-rewards .op-tier-growth {
  background: #ee648d12;
  border-color: #ee648d38;
}

.online-policy .op-tier-rewards .op-tier-growth strong {
  color: #ffc4d6;
}

.online-policy .op-tier-rewards > p {
  color: #dfcfd7;
  font: 400 11px/1.8 var(--font);
  margin: 0;
}

.online-policy .op-revenue > .op-growth-note {
  margin: 16px 0 0;
  background: #fff0f5;
  border-color: #edc9d7;
  border-radius: 13px;
}

.online-policy .op-formula {
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.5fr);
  gap: 30px;
  border-radius: 18px;
  background: #171719;
  padding: 32px;
}

.online-policy .op-formula .section-heading {
  color: #fff;
  font: 700 25px/1.5 var(--font);
  margin: 0;
}

.online-policy .op-formula .op-formula-content .article-paragraph,
.online-policy .op-formula .op-formula-content .article-list,
.online-policy .op-formula .op-formula-content .article-list li {
  color: #eee3e9;
  font: 400 14px/1.9 var(--font);
  letter-spacing: 0;
}

.online-policy .op-formula .op-formula-content > .op-source-block:first-child .article-list,
.online-policy .op-formula .op-formula-content > .op-source-block:first-child .article-list li {
  color: #ffd4e2;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

.online-policy .op-formula .op-formula-content .article-list li::marker {
  color: #ff9ab8;
}

.online-policy .op-formula-content > .op-source-block:last-child .article-list {
  border-color: #ffffff26;
}

.brand-message-card .feedback-person .feedback-brand-mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 10px;
  border: 1px solid #eadce1;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.brand-message-card .feedback-person > div > span {
  display: block;
  font: 400 12px/1.7 var(--font);
  color: #686265;
  margin-top: 3px;
}

@media (max-width: 1100px) {
  .interior-page .interior-route-grid:has(> .interior-learning-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .online-policy .op-tier-requirements {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 20px;
  }
  .online-policy .op-tier-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .online-policy .op-tier-explorer {
    grid-template-columns: minmax(0, 1fr);
  }
  .online-policy .op-tier-selector {
    border-right: 0;
    border-bottom: 1px solid #ffffff20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
    gap: 8px 24px;
    align-items: center;
  }
  .online-policy .op-tier-selector label {
    margin: 0;
  }
  .online-policy .op-tier-selector p {
    grid-column: 1 / -1;
    margin: 0;
  }
}

@media (max-width: 760px) {
  .interior-page .has-visual .interior-hero-main,
  .online-policy .op-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .interior-page .interior-hero-art,
  .interior-page.interior-index .interior-hero-art,
  .online-policy .op-visual-art {
    width: min(100%, 374px);
    max-width: 374px;
    max-height: 210px;
    justify-self: start;
    border-radius: 15px;
  }
  .online-policy .op-hero-visual {
    padding-bottom: 22px;
  }
  .lesson-v11-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .lesson-v11-intro .lesson-v11-illustration {
    width: min(100%, 374px);
    max-height: 210px;
    border-radius: 15px;
  }
  .online-policy .op-tier-summary {
    display: grid;
    padding: 22px;
    gap: 19px;
  }
  .online-policy .op-tier-selector {
    padding: 21px 22px;
  }
  .online-policy .op-formula {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 26px 23px;
  }
  .online-policy .op-formula .section-heading {
    font-size: 22px;
  }
  .online-policy .op-formula .op-formula-content .article-paragraph,
  .online-policy .op-formula .op-formula-content .article-list,
  .online-policy .op-formula .op-formula-content .article-list li {
    font-size: 13px;
  }
  .online-policy .op-formula .op-formula-content > .op-source-block:first-child .article-list,
  .online-policy .op-formula .op-formula-content > .op-source-block:first-child .article-list li {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .interior-page .interior-route-grid:has(> .interior-learning-card) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .interior-page .interior-learning-art {
    max-height: none;
  }
  .interior-page .interior-learning-card {
    max-width: 374px;
  }
  .online-policy .op-tier-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .online-policy .op-tier-selector p {
    grid-column: auto;
  }
  .online-policy .op-tier-requirements {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .online-policy .op-tier-label {
    grid-column: auto;
  }
  .online-policy .op-tier-requirements strong {
    font-size: 28px;
  }
  .online-policy .op-tier-rewards {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding-top: 17px;
  }
  .online-policy .op-tier-rewards > div {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
  }
  .online-policy .op-tier-rewards strong {
    font-size: 23px;
  }
}