/* The Mac page (src/tolk-mac.html), on top of site.css: the dark banner (.mac, .keycaps) opens it as its hero; the
   shortcuts are drawn as the keys themselves — no picture of the app until it is drawn from the real one. */
.mac-hero{margin-top:24px;border:0;padding-top:32px}
.btn-soon{background:var(--ink);color:#fff}
.mac-hero .req{margin-top:14px}

/* A shortcut above its card's title: small keycaps */
.combo{display:flex;gap:6px}
.combo kbd{min-width:36px;height:36px;padding:0 9px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(#FFFFFF,#EEF1F5);border:1px solid var(--line);box-shadow:0 2px 0 #CDD3DC;font:600 15px/1 var(--ios);color:var(--ink)}
.note{margin:20px 0 0;color:var(--ink-3);font-size:15px}

/* Before installing: the privacy panel's shape, four points in a row */
.need{margin-top:var(--rhythm);border-top:1px solid var(--line);padding-top:72px}
.need header{max-width:680px}
.need .more-link{display:inline-block;margin-top:18px}
.need .pledges{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width: 960px){ .need .pledges{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .need .pledges{grid-template-columns:1fr} }
@media (max-width:460px){.need{padding-top:44px}.mac-hero{padding-top:16px}}