/* How it works: four numbered stages, each a ruled row with its own tag, then the questions. */

/* ---------- the four stages ---------- */
.flow{list-style:none;margin:0;padding:0}
.flow > li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.25rem clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(1.75rem,4vw,2.75rem);border-top:3px solid var(--orange)}
.flow > li:last-child{padding-bottom:0}
.flow h2{font-size:clamp(1.4rem,2.6vw,1.8rem)}
.flow a,.faq a{font-weight:600}

/* numeral tag: a screw-hole tag with the step number, like the nameplates on the other pages */
.stepno{display:inline-flex;flex-direction:row;margin:0 0 .85rem;min-width:2.6em;font-size:2rem;font-weight:700;line-height:1;padding:.2em .8em .2em 1.2em}
.stepno .hole{width:.28em;height:.28em}
.stepno .hole.l{left:.4em}
.stephead{display:block}
@media (min-width:861px){.stephead{position:sticky;top:7rem;align-self:start}}
@media (max-width:860px){
  .flow > li{grid-template-columns:1fr}
  .stephead{display:flex;align-items:center;gap:1rem}
  .stepno{margin:0}
  .flow h2{margin:0}
}

.lead{font-size:1.25rem;font-weight:500;line-height:1.4;max-width:44ch;margin-bottom:1.25rem}

/* step 1: what to send, ruled rows with a tag naming each kind of order */
.sends{list-style:none;margin:0 0 1.5rem;padding:0;border-top:1px solid var(--line)}
.sends li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem 1.5rem;align-items:start;padding-block:1.1rem;border-bottom:1px solid var(--line)}
.sends .tag{font-size:1rem;width:100%;min-height:3em;padding-inline:1.6em}
.sends p{margin:0}
@media (max-width:520px){
  .sends li{grid-template-columns:1fr}
  .sends .tag{width:auto;justify-self:start;min-width:9em}
}

/* steps 2 and 4: tags joined by a plain word, no arrows */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;margin:1.5rem 0 1.75rem;font-size:1.3rem}
.chain .tag{min-width:6.5em}
.join{font:600 .9rem var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
@media (max-width:560px){.chain{flex-direction:column;align-items:flex-start;gap:.6rem}}

/* step 2: what to read on the proof; bullets are small tags */
.read{list-style:none;margin:.9rem 0 1.25rem;padding:0;display:grid;gap:.55rem}
.read li{position:relative;padding-left:1.6rem}
.read li::before{content:"";position:absolute;left:0;top:.5em;width:.8rem;height:.8rem;border-radius:2px;
  background:var(--char);box-shadow:inset 0 0 0 2px var(--orange)}

/* step 3: the machine, as an aluminum data plate with four screws */
.dataplate{display:inline-flex;margin:1.25rem 0 1.5rem;font-size:1.5rem;padding:.75em 2.4em}
.dataplate .hole{width:.4em;height:.4em}
.dataplate .hole.tl,.dataplate .hole.tr{top:.45em}
.dataplate .hole.bl,.dataplate .hole.br{bottom:.45em}
.dataplate .hole.tl,.dataplate .hole.bl{left:.5em}
.dataplate .hole.tr,.dataplate .hole.br{right:.5em}
@media (max-width:420px){.dataplate{font-size:1.25rem;padding-inline:2.2em}}

/* ---------- questions ---------- */
.faq{margin:.6rem 0 0;border-top:1px solid var(--line)}
.faq > div{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:.4rem clamp(1.5rem,4vw,3.5rem);padding-block:1.1rem;border-bottom:1px solid var(--line)}
.faq dt{font-weight:600;font-size:1.05rem;line-height:1.35}
.faq dd{margin:0;max-width:62ch}
@media (max-width:760px){.faq > div{grid-template-columns:1fr}}

/* ---------- closing plate ---------- */
#start .plate h2{margin-bottom:.8rem}
#start .plate .lede{margin-bottom:1.5rem}