.comparison-section {
  padding-block: 94px 62px;
  border-bottom: 1px solid var(--line);
}
.comparison-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 55px;
  margin-bottom: 38px;
}
.comparison-heading h2 { margin-bottom: 0; font-size: clamp(36px,4.1vw,55px); }
.comparison-heading > p { max-width: 315px; margin-bottom: 5px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.comparison-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.comparison-toolbar > div { display: flex; align-items: baseline; gap: 16px; }
.comparison-child { font: 23px var(--serif); letter-spacing: -.025em; }
.comparison-style { font-size: 11px; color: var(--muted); }
.simulation-badge { padding: 7px 12px; border: 1px solid #ddd6c6; border-radius: 30px; font-size: 9px; color: #7c755d; white-space: nowrap; }
.comparison-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; position: relative; }
.comparison-card { margin: 0; border-radius: 6px; background: #f0e9de; overflow: hidden; }
.comparison-card figcaption { min-height: 52px; padding: 15px 19px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; }
.comparison-card figcaption small { font-size: 9px; font-weight: 400; color: var(--muted); text-align: right; }
.comparison-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.illustration-card { background: #e5eadc; }
.comparison-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-10%); width: 54px; height: 54px; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font: 30px var(--serif); color: var(--rust); z-index: 1; }
.comparison-details { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 21px 25px; }
.comparison-details p { margin: 0; font-size: 12px; color: var(--muted); }
.comparison-details .text-link { font-size: 11px; }
.comparison-picker-label { margin: 0 0 13px; font-size: 10px; color: var(--muted); }
.comparison-picker { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 12px; }
.comparison-picker button { padding: 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); min-width: 0; }
.comparison-picker button:hover { background: #eee8db; }
.comparison-picker button[aria-pressed=true] { border-color: var(--green); background: #e7eddf; }
.comparison-picker img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.comparison-picker span { display: block; margin: 8px 0 2px; font-size: 10px; }
.comparison-disclosure { margin: 23px 0 0; max-width: 770px; color: #818577; font-size: 10px; line-height: 1.8; }
@media(max-width:1100px) {
  .comparison-heading { gap: 30px; }
  .comparison-heading > p { max-width: 260px; }
  .comparison-heading h2 { font-size: 43px; }
  .comparison-picker { gap: 6px; }
  .comparison-style { font-size: 10px; }
}
@media(max-width:800px) {
  .comparison-section { padding-top: 72px; }
  .comparison-heading { display: block; }
  .comparison-heading > p { max-width: 430px; margin: 23px 0 0; }
  .comparison-pair { gap: 22px; }
  .comparison-card figcaption { padding: 13px; font-size: 10px; min-height: 53px; }
  .comparison-card figcaption small { font-size: 8px; }
  .comparison-details { align-items: flex-start; }
  .comparison-details p { font-size: 11px; }
  .comparison-picker { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
  .comparison-picker img { max-height: 120px; }
}
@media(max-width:600px) {
  .comparison-section { padding-block: 61px 52px; }
  .comparison-heading { margin-bottom: 28px; }
  .comparison-heading h2 { font-size: clamp(34px,9.3vw,43px); line-height: 1.13; }
  .comparison-heading > p { font-size: 12px; }
  .comparison-toolbar { align-items: flex-start; margin-bottom: 16px; }
  .comparison-toolbar > div { display: block; }
  .comparison-child { display: block; font-size: 21px; }
  .comparison-style { display: block; margin-top: 7px; font-size: 9px; }
  .simulation-badge { font-size: 8px; padding: 6px 9px; margin-top: 2px; }
  .comparison-pair { gap: 12px; }
  .comparison-card figcaption { display: block; padding: 10px; min-height: 56px; font-size: 9px; line-height: 1.5; }
  .comparison-card figcaption small { display: block; text-align: left; margin-top: 4px; font-size: 8px; }
  .comparison-arrow { width: 33px; height: 33px; font-size: 21px; transform: translate(-50%,0); }
  .comparison-details { display: block; padding-block: 17px 25px; }
  .comparison-details p { font-size: 10px; margin-bottom: 17px; }
  .comparison-details .text-link { font-size: 10px; }
  .comparison-picker { gap: 3px; }
  .comparison-picker button { padding: 4px; }
  .comparison-picker span { font-size: 9px; margin-top: 6px; }
  .comparison-disclosure { font-size: 9px; margin-top: 19px; }
}