.legacy-overview { --navy:#0b2450; --ink:#18345f; --body:#4d617b; --muted:#7f8da2; --line:#e1ebf7; --soft-line:#eef4fb; --blue:#1768dc; --page-max:1180px; --page-gutter:clamp(40px,8vw,160px); color:var(--body); }
.legacy-overview .problem-section { padding:0; border:0; }
.legacy-overview .feature-section { padding-bottom:0; }
.legacy-overview .section-heading > p { max-width:none; margin-top:0; }
.legacy-overview .detail-link-row a { padding:0; }
.legacy-overview .round-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #eef5ff;
  position: relative;
}
.legacy-overview .round-icon {
  display: block;
  background: transparent;
  object-fit: contain;
}
.legacy-overview .problem-section,
.legacy-overview .feature-section {
  width: min(var(--page-max), calc(100% - var(--page-gutter)));
  margin: 0 auto;
}
.legacy-overview .section-card {
  border: 1px solid var(--soft-line);
  border-radius: 28px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 14px 36px rgb(6 27 73 / 5%);
}
.legacy-overview .section-card {
  padding: 40px 58px 52px;
}
.legacy-overview .section-card h2,
.legacy-overview .section-heading h2 {
  text-align: center;

  line-height: 1.3;
  margin-bottom: 14px;
}
.legacy-overview .section-lead {
  color: var(--muted);

  font-weight: 400;
  line-height: 1.8;
  text-align: center;
  margin: 0 0 30px;
}
/* The problem section is a photo list, without card frames. */
.legacy-overview .problem-list {
  max-width: 840px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.legacy-overview .problem-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 4px;
  align-content: center;
  padding: 20px 0;
}
.legacy-overview .problem-item + .problem-item { border-top: 1px solid var(--line); }
.legacy-overview .problem-item img { grid-row: 1 / 3; }
.legacy-overview .problem-item h3 { margin: 0; align-self: end; }
.legacy-overview .problem-item p { margin: 0; align-self: start; }
.legacy-overview .feature-section {
  padding-top: 52px;
}
.legacy-overview .section-heading {
  max-width: 780px;
  margin: 0 auto 24px;
  text-align: center;
}
.legacy-overview .section-heading p {
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 0;
}
.legacy-overview .detail-link-row {
  margin-top: 10px !important;
  color: var(--body) !important;
}
.legacy-overview .detail-link-row a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legacy-overview .feature-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 990px;
  margin: 0 auto;
  gap: 22px;
  padding: 4px 2px 14px;
}
.legacy-overview .feature-card {
  position: relative;
  min-height: 432px;
  overflow: hidden;
  padding: 14px 14px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(6 27 73 / 4%);
}
.legacy-overview .feature-card h3 {

  line-height: 1.35;
  margin: 30px 18px 10px;
}
.legacy-overview .feature-card p {
  color: #52637c;

  font-weight: 400;
  line-height: 1.82;
  margin: 0 18px;
}
.legacy-overview .feature-card > img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 16px;
}
.legacy-overview .feature-card:nth-child(1) > img { object-position: 62% 35%; }
.legacy-overview .feature-card:nth-child(2) > img { object-position: 42% 42%; }
.legacy-overview .feature-card:nth-child(3) > img { object-position: 52% 34%; }
/* Preserve the original cards while sharing readable type sizes. */
.legacy-overview .section-card h2, .legacy-overview .section-heading h2 { font-size: var(--text-section); line-height: 1.5; }
.legacy-overview .problem-item h3, .legacy-overview .feature-card h3 { font-size: var(--text-heading); line-height: 1.65; }
.legacy-overview .problem-item p, .legacy-overview .feature-card p { font-size: var(--text-body); line-height: 1.8; color: #47536a; }
.legacy-overview .section-lead, .legacy-overview .section-heading p { font-size: var(--text-small); line-height: 1.8; color: #47536a; }
@media (max-width: 1000px) {
  .legacy-overview .feature-rail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .legacy-overview .problem-item, .legacy-overview .feature-card { min-height: 0; }
  .legacy-overview .section-card { padding: 28px 22px 32px; }
}

.legacy-overview .feature-section {
  width: min(var(--content-max), calc(100% - var(--gutter) * 2));
}

@media (max-width: 760px) {
  .legacy-overview .problem-section { width: calc(100% - var(--gutter) * 2); }
}

.legacy-overview .problem-emotion { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; align-self: center; }

.legacy-overview .problem-section .section-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 36px 0;
}
@media (max-width: 760px) {
  .legacy-overview .problem-item { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; }
  .legacy-overview .problem-emotion { width: 88px; height: 88px; }
}

/* Enlarge each concern while retaining the compact photo list. */
.legacy-overview .problem-item h3 { font-size:22px; }
.legacy-overview .problem-item p { font-size:18px; }
@media(max-width:760px) {
 .legacy-overview .problem-item h3 { font-size:20px; }
 .legacy-overview .problem-item p { font-size:17px; }
}