.page-head { padding-block: var(--space-lg) var(--space-md); }
main.section > .container > .section { padding-block: var(--space-lg); }
main.section > .container > .section:first-of-type { padding-top: 0; }
main.section h2.section-title { margin-bottom: var(--space-md); }
.process-flow { position:relative; }
.process-line { position:absolute; left:20px; top:0; bottom:0; width:2px; background: var(--color-border); }
.process-line-fill { position:absolute; left:0; top:0; width:100%; height:100%; background: var(--color-accent); transform-origin: top; }
.steps { display:grid; gap:1rem; }
.step { position:relative; padding:1rem 1rem 1rem 3.5rem; border:1px solid var(--color-border); border-radius: var(--radius-lg); background:#fff; }
.step-num { position:absolute; left:1rem; top:1rem; width:2rem; height:2rem; border-radius:50%; border:2px solid var(--color-accent); color: var(--color-accent); display:grid; place-items:center; }
.incoterms-wrap { overflow:auto; border:1px solid var(--color-border); border-radius: var(--radius-lg); }
.incoterms { width:100%; min-width: 640px; }
.incoterms th, .incoterms td { padding:0.9rem; border-bottom: 1px solid var(--color-border); text-align:left; }
.info-grid { display:grid; gap:1rem; }
.timeline-bar { border:1px solid var(--color-border); border-radius: var(--radius-lg); overflow:hidden; display:grid; grid-template-columns: 2fr 4fr 1fr 1fr; }
.timeline-bar div { padding: 1rem; text-align:center; font-size: var(--text-sm); }
.timeline-bar div:nth-child(1) { background:#dbe8df; }
.timeline-bar div:nth-child(2) { background:#c6dbcf; }
.timeline-bar div:nth-child(3) { background:#eddcc3; }
.timeline-bar div:nth-child(4) { background:#b5813a; color:#fff; }
@media (min-width: 1024px) {
  .process-line { left: 0; right: 0; width:100%; height:2px; top: 50%; bottom:auto; }
  .process-line-fill { width:100%; height:100%; transform-origin:left center; }
  .steps { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .step { padding: 3.2rem 1rem 1rem; text-align:center; }
  .step-num { left:50%; top:1rem; transform: translateX(-50%); }
  .info-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
