/* Weigh Station: page-only layout */
.section-head:has(+ .ws-use-grid) { --lead: 9; } /* the lead starts over the third item below */
.ws-use-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--block-gap); align-items: start; }
.ws-use-item { grid-column: span 4; display: grid; gap: 0.75rem; align-content: start; }
.ws-use-item h3 { font-size: var(--step-lead); font-weight: 500; line-height: 1.15; }
.ws-use-item .connect { margin-block-start: 0.25rem; }
.ws-use-item code, .ws-steps code, .ws-status code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--step-small); overflow-wrap: anywhere; }
.ws-action { margin-block-start: 0.5rem; }
.ws-pic--tall { grid-column: span 4; }

.ws-pic { margin: 0; display: grid; gap: 0.75rem; }
.ws-pic img { inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.ws-pic--tall img { aspect-ratio: 1; object-fit: cover; }
/* side by side, the picture is exactly as tall as the two columns of text beside it */
@media (min-width: 1101px) {
  .ws-use-grid { align-items: stretch; }
  .ws-pic--tall { display: flex; flex-direction: column; gap: 0.75rem; }
  .ws-pic--tall img { flex: 1 1 0; min-block-size: 14rem; contain: size; aspect-ratio: auto; inline-size: 100%; }
}

.ws-does { align-items: center; }
.ws-does h2 { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); margin-block-end: 2.5rem; }
.ws-list { display: grid; gap: 2rem; }
.ws-list dt { font-size: var(--step-lead); font-weight: 500; line-height: 1.15; }
.ws-list dd { margin: 0.5rem 0 0; max-inline-size: 52ch; }

.ws-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--block-gap) var(--gutter); }
.ws-form { display: grid; gap: 0.75rem; align-content: start; }
.ws-form label { font-size: var(--step-lead); font-weight: 500; }
.ws-field { display: flex; gap: 0.5rem; }
.ws-field input { flex: 1; min-inline-size: 0; padding-block: 0.7rem; padding-inline: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; }
.ws-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ws-strip { margin: var(--block-gap) 0 0; display: grid; gap: 0.75rem; }
.ws-strip img { inline-size: 100%; block-size: auto; border-radius: var(--radius); }

.ws-sell .ws-pic--sell { margin-block-start: var(--block-gap); }

.ws-signup-title { font-size: var(--step-head); line-height: 0.95; letter-spacing: var(--track-tight); }
/* the heading travels beside the three steps instead of leaving a gap under it */
@media (min-width: 1101px) { .ws-signup-title { position: sticky; inset-block-start: calc(var(--header) + 24px); align-self: start; } }
.ws-signup { padding-block-start: var(--section); }
.ws-steps { list-style: decimal; padding-inline-start: 1.4em; display: grid; gap: 2rem; }
.ws-steps li::marker { font-weight: 500; }
.ws-steps li > * + * { margin-block-start: 0.75rem; }
.ws-steps pre.block { white-space: pre; }
.ws-status { margin-block-start: 2.5rem; }

@media (max-width: 1100px) {
  .ws-use-item { grid-column: span 6; }
  .ws-pic--tall { grid-column: 1 / -1; max-inline-size: 32rem; }
}
@media (max-width: 760px) {
  .ws-use-item { grid-column: 1 / -1; }
  .ws-forms { grid-template-columns: 1fr; }
}