/* ============================================================
   Features (features.html), on top of site.css + pages.css. Each section: the problem in .prob,
   then what ShipItFam does in .frows, with a doodle (.f-art) or a real screen, tap marked (.f-shot).
     .jump--row ...... the section links, in a row under the intro (hidden until the reader picks)
     .loop ........... how every job runs: five steps, the two that wait for you marked
   ============================================================ */
.phero h1{max-width:16ch}
.phero .lede{max-width:60ch}
nav.jump--row{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;max-width:none;border:0}
nav.jump--row a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;font-weight:700;font-size:15px;text-decoration:none}
nav.jump--row a::after{content:none}
nav.jump--row a:hover{border-color:var(--signal);color:var(--signal)}

#main svg.doodle{width:100%;height:auto}
.f-art{display:block;width:min(240px,70%);margin-top:28px}
.f-art--pair{display:flex;gap:18px;width:min(320px,90%)}
.f-art--pair svg{flex:1 1 0;min-width:0}
.f-lede{max-width:66ch}
.f-kraken{margin-top:28px}

.loop{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:12px;counter-reset:lp}
.loop li{counter-increment:lp;padding:12px 12px 14px;background:rgba(13,43,51,.06);border-radius:4px}
.loop li::before{content:counter(lp);display:block;font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--paper-dim)}
.loop b{display:block;font-size:17px;letter-spacing:-.02em}
.loop span{display:block;font-size:14px;line-height:1.35;color:#2E4247}
.loop li.you{background:var(--sea);color:var(--chalk)}
.loop li.you::before{color:var(--signal)}
.loop li.you span{color:var(--signal);font-weight:700}
@media(max-width:640px){.loop{grid-template-columns:1fr 1fr}.loop li:last-child{grid-column:1/-1}}
#kraken h2{max-width:28ch}