.island-system {
  padding: 0 0 104px;
}
.system-head {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 48px;
  padding: 18px 0 37px;
  border-top: 1px solid var(--ink);
}
.system-head span,
.system-parts b,
.section-line,
.pricing-grid span,
.order-info > div > span {
  font:
    500 0.69rem "DM Mono",
    monospace;
  letter-spacing: 0.08em;
}
.system-head h2 {
  margin: 0;
  font:
    700 clamp(2.3rem, 4.7vw, 5rem)/0.92 "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -0.085em;
}
.system-head p {
  grid-column: 2;
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.95;
}
.system-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.system-parts article {
  min-height: 210px;
  padding: 21px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.system-parts b {
  color: var(--red);
}
.system-parts h3 {
  margin: 51px 0 12px;
  font:
    700 1.15rem/1 "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -0.05em;
}
.system-parts p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.8;
}
.pricing-system {
  padding-bottom: 105px;
}
.section-line {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  border-top: 1px solid var(--ink);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.pricing-grid article {
  min-height: 195px;
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.pricing-grid span {
  color: var(--red);
}
.pricing-grid h3 {
  margin: 48px 0 11px;
  font:
    700 1rem/1 "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -0.045em;
}
.pricing-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.75;
}
.pricing-note {
  max-width: 780px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.85;
}
.order-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  padding: 0 0 105px;
}
.order-info > div > span {
  color: var(--red);
}
.order-info h2 {
  margin: 18px 0 0;
  font:
    700 clamp(2.1rem, 4vw, 4.3rem)/0.97 "Plus Jakarta Sans",
    sans-serif;
  letter-spacing: -0.08em;
}
.order-list {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
.order-list span {
  padding: 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 0.82rem;
}
@media (max-width: 720px) {
  .island-system {
    padding-bottom: 68px;
  }
  .system-head {
    grid-template-columns: 1fr;
    gap: 23px;
    padding-bottom: 28px;
  }
  .system-head p {
    grid-column: auto;
    font-size: 0.86rem;
  }
  .system-parts,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .system-parts article {
    min-height: 160px;
    padding: 18px;
  }
  .system-parts h3 {
    margin: 32px 0 10px;
  }
  .pricing-system {
    padding-bottom: 70px;
  }
  .pricing-grid article {
    min-height: 135px;
    padding: 17px;
  }
  .pricing-grid h3 {
    margin: 26px 0 8px;
  }
  .pricing-note {
    font-size: 0.72rem;
  }
  .order-info {
    grid-template-columns: 1fr;
    gap: 27px;
    padding-bottom: 70px;
  }
  .order-list {
    font-size: 0.78rem;
  }
  .order-list span {
    padding: 13px;
    font-size: 0.76rem;
  }
}