/* 5e combines the story sequence with the practical value of each action. */
main > .case-combined-section { background: #F4F0E8; border-radius: 25.6px; padding-block: 72px 52px; }
.case-combined-heading { margin-bottom: 32px; }
.case-combined-heading .h2 { font-size: clamp(36px, 3.8vw, 49px); }
.case-combined-heading > p:last-child { margin: 17px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.case-combined-journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.case-combined-stop { --step-color: #4D716C; position: relative; min-width: 0; padding: 23px 21px; border: 1px solid #DDE4DA; border-radius: 18px; background: #F8FAF4; }
.case-combined-stop:not(:last-child)::after { content: '→'; position: absolute; z-index: 1; top: 27px; right: -17px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #DDD8CC; background: #FBF9F6; color: #746F62; font-size: 16px; }
.case-combined-step { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; color: var(--step-color); }
.case-combined-step > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; letter-spacing: 0; }
.case-combined-art { height: 152px; margin: 8px 0 10px; display: flex; align-items: center; justify-content: center; }
.case-combined-home img { width: 190px; max-width: 100%; height: auto; }
.case-combined-stop h3 { margin: 0 0 9px; color: var(--ink); font-size: 22px; line-height: 1.25; letter-spacing: -.035em; font-weight: 600; }
.case-combined-stop > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.case-combined-stop--gap { --step-color: #9A503C; background: #F7E4D9; border-color: #EACFC0; }
.case-combined-gap { flex-direction: column; gap: 6px; color: #974931; }
.case-combined-gap > span { font-size: 11px; }
.case-combined-gap strong { font-size: clamp(31px, 3vw, 39px); font-weight: 600; letter-spacing: -.065em; white-space: nowrap; }
.case-combined-gap svg { width: 154px; height: 22px; margin-top: 3px; max-width: 100%; }
.case-combined-stop--solution { --step-color: #406788; background: #EAF1F7; border-color: #D3E1EE; }
.case-combined-options { position: relative; flex-direction: column; gap: 12px; align-items: stretch; }
.case-combined-option { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border: 1px solid #D5DEE5; border-radius: 10px; background: #F6F8FA; }
.case-combined-option > span { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; background: #E9DFDA; color: #956049; font-size: 18px; }
.case-combined-option small { display: block; font-size: 10px; color: #59666F; line-height: 1.5; }
.case-combined-option strong { display: block; font-size: 11px; line-height: 1.5; font-weight: 550; color: #616B75; }
.case-combined-option--yes { background: #E2EFE4; border-color: #B7D3C3; }
.case-combined-option--yes > span { background: #3A765C; color: #FFF; font-size: 14px; }
.case-combined-option--yes strong { color: #2A654E; font-weight: 600; }
.case-combined-stop--result { --step-color: #E3CC90; background: #244F42; border-color: #244F42; }
.case-combined-key { color: #F2D992; }
.case-combined-key svg { width: 190px; max-width: 100%; height: 140px; }
.case-combined-stop--result h3 { color: #FFFCF4; }
.case-combined-stop--result > p { color: #D1DFD2; }
.case-combined-seal { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11px; line-height: 1.5; color: #E5EDDF; }
.case-combined-seal > span:first-child { color: #B9D7AE; }
.case-combined-value { padding-top: 29px; }
.case-combined-value > h3 { font-size: 18px; font-weight: 600; margin: 0 0 17px; letter-spacing: -.02em; }
.case-combined-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.case-combined-benefits > div { display: flex; gap: 11px; min-width: 0; }
.case-combined-benefit-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: #DBE8EA; color: #507787; }
.case-combined-benefits > div:nth-child(2) .case-combined-benefit-icon { color: #9A733D; background: #F0E3C7; }
.case-combined-benefits > div:nth-child(3) .case-combined-benefit-icon { color: #69745A; background: #E2E8D9; }
.case-combined-benefit-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.case-combined-benefits p { margin: 0; }
.case-combined-benefits p > span { display: block; color: #6B655A; font-size: 12px; line-height: 1.6; }
.case-combined-benefits strong { display: flex; gap: 5px; margin-top: 4px; color: #2B5B48; font-size: 15px; line-height: 1.5; font-weight: 600; }
.case-combined-benefits i { font-style: normal; color: #68917C; }
.case-combined-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--muted); border-top: 1px solid #DFD8CB; margin: 24px 0 0; padding: 17px 0 0; }
.case-combined-now > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #678C6A; }
.case-combined-now strong { color: #3E5C45; font-weight: 600; }
.case-combined-section .case-story { margin-top: 20px; }
@media (min-width: 701px) and (max-width: 1000px) {
  .case-combined-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .case-combined-stop { padding: 24px; }
  .case-combined-stop:nth-child(2)::after { display: none; }
  .case-combined-options { max-width: 240px; margin-inline: auto; }
  .case-combined-benefits { gap: 15px; }
  .case-combined-benefits > div { flex-direction: column; }
}
@media (max-width: 700px) {
  main > .case-combined-section { padding-block: 64px 36px; }
  .case-combined-heading .h2 { font-size: clamp(34px, 8.5vw, 43px); }
  .case-combined-heading .h2 em { display: block; }
  .case-combined-journey { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .case-combined-stop { display: grid; grid-template-columns: minmax(0, 1fr) 91px; column-gap: 10px; padding: 20px; }
  .case-combined-step { grid-column: 1 / -1; margin-bottom: 19px; font-size: 11px; }
  .case-combined-art { grid-column: 2; grid-row: 2 / 4; height: auto; margin: 0; }
  .case-combined-stop h3 { grid-column: 1; grid-row: 2; font-size: 21px; }
  .case-combined-stop > p { grid-column: 1; grid-row: 3; font-size: 14px; }
  .case-combined-home img, .case-combined-key svg { width: 100%; height: auto; }
  .case-combined-stop:not(:last-child)::after { content: '↓'; top: auto; bottom: -21px; right: calc(50% - 11px); background: #F4F0E8; height: 24px; border-color: #D7D0C2; }
  .case-combined-stop--gap, .case-combined-stop--solution { display: block; }
  .case-combined-gap { align-items: flex-start; margin: 1px 0 14px; gap: 2px; }
  .case-combined-gap strong { font-size: 39px; }
  .case-combined-gap svg { display: none; }
  .case-combined-options { display: flex; flex-direction: row; gap: 8px; margin-bottom: 18px; }
  .case-combined-option { align-items: flex-start; gap: 7px; flex: 1 1 0; min-width: 0; padding: 10px 8px; }
  .case-combined-option > span { width: 20px; height: 20px; flex-basis: 20px; }
  .case-combined-option small { font-size: 10px; }
  .case-combined-option strong { font-size: 11px; }
  .case-combined-seal { grid-column: 1 / -1; padding-top: 13px; border-top: 1px solid #527464; margin-top: 16px; font-size: 12px; }
  .case-combined-benefits { grid-template-columns: 1fr; gap: 18px; }
  .case-combined-benefits p > span { font-size: 12px; }
  .case-combined-benefits strong { font-size: 15px; }
  .case-combined-value > h3 { font-size: 19px; margin-bottom: 21px; }
  .case-combined-now { gap: 7px; }
  .case-combined-now > span:last-child { flex-basis: 100%; }
}
@media (max-width: 360px) {
  .case-combined-stop { padding: 18px 15px; grid-template-columns: minmax(0, 1fr) 72px; }
  .case-combined-stop h3 { font-size: 20px; }
  .case-combined-option { flex-direction: column; }
}