/* 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:clamp(8px,2vw,24px)}
.btn-soon{background:#fff;color:var(--ink)}
.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);background:var(--surface);border:1px solid var(--line);border-radius:36px;padding:clamp(28px,5vw,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{border-radius:28px;margin-inline:calc(var(--gutter) * -.5)} }