/* The hub: the floor of machines. Pairs with base.css. */

.hub-hero { position: relative; overflow: hidden; padding: 96px var(--gutter) var(--section); text-align: center; }
.status-win { position: relative; width: min(340px, 100%); margin: 0 auto; text-align: left; }
.status-body { background: var(--paper); margin: 3px; padding: 12px 14px 14px; }
.status-cmd { font-family: var(--px); font-size: 21px; line-height: 1.1; margin-bottom: 6px; }
.status-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-family: var(--px); font-size: 21px; line-height: 1.12; }
.status-lines li { display: grid; grid-template-columns: 16px 1fr; }
.status-lines li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; background: var(--ink); }
.hub-hero h1 { position: relative; margin: clamp(88px, 10vw, 120px) auto 0; max-width: 13ch; font-size: clamp(3.1rem, 9.1vw, 8.5rem); line-height: .88; letter-spacing: -.05em; }
.hub-hero .sub { position: relative; max-width: 44ch; margin: 36px auto 0; font-size: clamp(1.08rem, 1.4vw, 1.28rem); line-height: 1.35; text-wrap: pretty; letter-spacing: -.01em; }
.hub-hero .cta { position: relative; display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.floor { padding: 0 0 var(--section); }
.floor .crop, .how-block .crop { margin: 0 auto; }
.floor h2, .how-block h2 { font-size: clamp(2.6rem, 6.3vw, 6rem); line-height: .9; letter-spacing: -.05em; text-align: center; }
.floor-win { margin-top: clamp(40px, 5vw, 64px); }
.floor-body { padding: 0; margin: 3px; background: var(--win-field); }
.row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 92px 92px 190px; gap: 18px; align-items: center; padding: 18px; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; transition: background-color .15s var(--ease); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--yellow); }
.row .n { font-family: var(--px); font-size: 30px; line-height: 1; }
.row .d { font-size: 1.04rem; line-height: 1.35; letter-spacing: -.01em; }
.row .s, .row .p { justify-self: start; font-family: var(--px); font-size: 19px; line-height: 1; padding: 3px 6px 2px; white-space: nowrap; }
.row .s { background: var(--ink); color: var(--yellow); }
.row .p { border: 1px solid var(--ink); }
.row .go { justify-self: end; font-weight: 500; letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; white-space: nowrap; }
.row .go::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .35em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-.1em) rotate(45deg); }
@media (max-width: 1100px) and (min-width: 901px) {
  .row { grid-template-columns: 140px minmax(0, 1fr) 92px 92px 160px; }
}
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr auto; grid-template-areas: "n n" "d d" "s p" "g g"; row-gap: 10px; }
  .row .n { grid-area: n; } .row .d { grid-area: d; }
  .row .s { grid-area: s; justify-self: start; } .row .p { grid-area: p; }
  .row .go { grid-area: g; justify-self: start; }
}

.how-block { padding: var(--section) 0; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 0; margin-top: clamp(40px, 5vw, 72px); }
.how-cell { border-left: 1px solid var(--ink); padding: 0 28px 4px 14px; }
.how-cell .mono { margin-bottom: 36px; }
.how-cell p:last-child { font-size: clamp(1.06rem, 1.3vw, 1.22rem); line-height: 1.35; letter-spacing: -.01em; max-width: 34ch; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; } .how-cell .mono { margin-bottom: 12px; } }