/*
  How this works — the few shapes hub.css does not already carry.

  Everything else on that page is a hub class. This file exists only because a
  reading page needs measure and rhythm that a three-card chooser does not: the
  hub is scanned, this is read.
*/

.how-block{margin:34px 0 0}
.how-block h2{margin:0 0 10px;font-family:var(--serif);font-size:20px;font-weight:400;
  color:var(--heading)}
.how-block p{margin:0 0 10px;font-family:var(--ui);font-size:14px;line-height:1.65;
  color:var(--text);max-width:62ch}

.how-steps{margin:0;padding:0 0 0 20px;display:grid;gap:11px}
.how-steps li{font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--text);
  max-width:62ch}
.how-steps strong,.how-tips strong{color:var(--heading);font-weight:600}
.how-steps em,.how-block em{font-style:normal;color:var(--accent)}

.how-tips{margin:0;padding:0 0 0 20px;display:grid;gap:9px;list-style:disc}
.how-tips li{font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--text);
  max-width:62ch}

/* Three side by side on a desktop, stacked on a phone — the same breakpoint the
   hub's own choices use, so the two pages break at the same width. */
.how-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.how-card{display:flex;flex-direction:column;gap:7px;padding:18px 18px 20px;border-radius:16px;
  border:1px solid var(--border);background:var(--card)}
.how-card .hub-mark{font-size:26px}
.how-card .hub-name{font-size:18px}
.how-card p{margin:0;font-family:var(--ui);font-size:13px;line-height:1.55;color:var(--muted)}

@media (max-width:720px){
  .how-cards{grid-template-columns:1fr}
}