/* CROWD — what Shill's sheet (site.css, the template) does not have: the CA chip as a button, the round X button, the settings
   cards, the mascot's size. Everything else is Shill's own rules. */
.hca { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hca[data-mint] { cursor: copy; }
.hx { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line2); }
.hx:hover { box-shadow: inset 0 0 0 1.5px var(--ink2); }
.foot-ca { border: 0; background: none; padding: 4px 0; font: 600 15px/1.6 var(--mono); color: var(--ink2); cursor: pointer; text-align: left; }
.mascot { width: min(400px, 78%); }
.knobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.knob { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 22px 22px 20px; }
.knob .k { display: inline-block; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.knob b { display: block; margin: 10px 0 6px; font: 800 20px/1.15 var(--display); letter-spacing: -.02em; }
.knob p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5; }
@media (max-width: 1000px) { .knobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .knobs { grid-template-columns: 1fr; } }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 14px/1.3 var(--text); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.toast.err { background: var(--bad); }
/* the simulator card overlaps the hero's foot, as Shill's demo card does */
main > .sim:first-child { margin-top: -118px; position: relative; z-index: 2; }
/* four steps in one row (Shill's grid was three); the footer's brand stays a row (Shill's .foot a is display:block) */
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.foot a.brand { display: inline-flex; padding: 0; color: var(--ink); font-size: 24px; }