.offer-diagram { display: flex; flex-direction: column; padding: 1.75rem; background: var(--machine); color: var(--paper); position: relative; border: 1px solid var(--machine); }
.offer-diagram::after { content: ""; width: 2.25rem; height: 2.25rem; position: absolute; right: -1px; bottom: -1px; background: var(--lime); border-left: 1px solid var(--machine); border-top: 1px solid var(--machine); }
.offer-diagram .field-label { color: var(--lime); }
.diagram-title { display: block; font-family: "PT Serif", Georgia, serif; font-weight: 700; font-size: clamp(1.65rem, 2.25vw, 2.3rem); line-height: 1.2; letter-spacing: -.03em; margin-top: 1.1rem; }
.offer-track { list-style: none; display: grid; gap: 1.1rem; padding: 0; margin-block: 2rem; flex: 1; align-content: center; }
.offer-track li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: center; gap: 1rem; position: relative; font-size: 1.1875rem; }
.track-node { position: relative; display: block; width: 1.4rem; height: 1.4rem; border: 1px solid var(--lime); background: var(--machine); z-index: 1; }
.offer-track li:first-child .track-node { background: var(--lime); }
.offer-track li:not(:last-child)::after { content: ""; position: absolute; width: 1px; height: calc(100% + 1.2rem); left: .7rem; top: .7rem; background: var(--lime); }
.offer-track li:last-child { border: 1px solid #839477; padding: .75rem; margin-left: -.75rem; }
.diagram-caption { font-size: 1rem; max-width: 28ch; padding-right: 1rem; border-top: 1px solid #7b907c; padding-top: 1.1rem; }
.bill-diagram { background: var(--machine); color: var(--paper); padding: 1.5rem; border: 1px solid var(--machine); }
.bill-diagram .field-label { color: var(--lime); }
.bill-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; margin-block: 1rem; font-size: 1.1875rem; }
.bill-parts span:nth-child(odd) { padding: .35rem .8rem; border: 1px solid #839477; }
.bill-parts span:nth-child(even) { text-align: center; font-size: 1.5rem; color: var(--lime); }
.bill-result { border-top: 1px solid #839477; padding-top: .8rem; font-size: 1.125rem; }

@media (max-width: 700px) {
  .offer-diagram { padding: 1.25rem; }
  .diagram-title { font-size: 1.6rem; }
  .offer-track { gap: .7rem; margin-block: 1.4rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .offer-track li { grid-template-columns: minmax(0, 1fr); gap: .65rem; padding: .6rem; border: 1px solid #839477; font-size: 1.125rem; }
  .offer-track li:not(:last-child)::after { display: none; }
  .offer-track li:last-child { margin: 0; padding: .6rem; }
  .diagram-caption { max-width: none; }
  .bill-diagram { padding: 1.25rem; }
  .bill-parts { grid-template-columns: minmax(0, 1fr); }
}