#idea { container-type: inline-size; --journey-line: #92958e; --journey-shadow: #d4cec2; }
#idea .section-heading { margin-bottom: 34px; }
#idea .eyebrow { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; color: var(--ink-2); font: 12px/1.6 var(--pixel); letter-spacing: .09em; text-transform: uppercase;  word-spacing: var(--pixel-word-spacing);}
#idea .eyebrow > span { color: var(--red-ink); }
#idea h2 { margin: 0; max-width: 800px; font: 400 clamp(58px, 6.2vw, 80px)/1.03 var(--serif); letter-spacing: -.015em; }
#idea .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; list-style: none; padding: 0; margin: 0; }
#idea .step { min-width: 0; position: relative; }
#idea .drawing { height: 190px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 24px; }
#idea .drawing svg { display: block; width: 184px; height: auto; max-width: 90%; overflow: visible; }
#idea .step:not(:last-child) .drawing::after { content: ""; position: absolute; width: 19px; height: 19px; right: -24px; top: calc(50% - 9px); background: var(--red-ink); clip-path: polygon(0 37%, 58% 37%, 58% 0, 100% 50%, 58% 100%, 58% 63%, 0 63%); }
#idea .surface { fill: var(--paper-2); }
#idea .outline { stroke: var(--ink); stroke-width: 2; }
#idea .shadow { fill: var(--journey-shadow); }
#idea .solid, #idea .paper { fill: var(--ink); }
#idea .accent { fill: var(--red-ink); }
#idea .muted-fill { fill: var(--journey-line); }
#idea .step-copy { position: relative; border-top: 1px solid var(--journey-line); padding-top: 21px; }
#idea .step-number { display: block; color: var(--red-ink); font: 12px/1.6 var(--pixel); letter-spacing: .1em; margin-bottom: 8px;  word-spacing: var(--pixel-word-spacing);}
#idea h3 { margin: 0 0 10px; font: 400 34px/1.15 var(--serif); }
#idea .step-copy > p { margin: 0; max-width: 25ch; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@media (prefers-color-scheme: dark) {
  #idea { --journey-line: #606a70; --journey-shadow: #121719; }
}
@container (max-width: 950px) {
  #idea h2 { font-size: 64px; }
  #idea .steps { gap: 24px; }
  #idea .drawing { height: 150px; }
  #idea .drawing svg { width: 150px; }
  #idea .step:not(:last-child) .drawing::after { right: -20px; width: 16px; height: 16px; }
  #idea h3 { font-size: 30px; }
  #idea .step-copy > p { font-size: 14px; }
}
@container (max-width: 680px) {
  #idea .section-heading { margin-bottom: 18px; }
  #idea h2 { font-size: 56px; }
  #idea .steps { display: flex; flex-direction: column; gap: 0; }
  #idea .step { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--journey-line); }
  #idea .step:last-child { border: 0; }
  #idea .drawing { height: 116px; margin: 0; }
  #idea .drawing svg { max-width: 100%; width: 105px; }
  #idea .step:not(:last-child) .drawing::after { display: none; }
  #idea .step-copy { border: 0; padding-top: 4px; }
  #idea .step-number { font-size: 11px; margin-bottom: 5px; }
  #idea h3 { font-size: 31px; margin-bottom: 7px; }
  #idea .step-copy > p { max-width: 32ch; }
}
@container (max-width: 360px) {
  #idea h2 { font-size: 48px; }
  #idea .eyebrow { font-size: 11px; margin-bottom: 20px; }
  #idea .step { grid-template-columns: 85px minmax(0, 1fr); gap: 18px; }
  #idea .drawing { height: 105px; }
  #idea .drawing svg { width: 85px; }
  #idea .step-copy > p { font-size: 13px; }
  #idea h3 { font-size: 28px; }
}