/* Product boxes inside the free tools and articles: the next step after a tool's answer.
   .pnx is the box: an icon and label, a heading, a line and one clear button. .mctry adds the playable
   Mix Chops question (assets/js/mc-try.js fills .mctry__ui); .pnx--pb is PrintBus's.
   Every rule has two classes, so a tool's own reset (.dm-calc *, .cv-container * set margin and padding
   to 0) and .prose's link and paragraph styles don't reach inside. */
div.pnx{position:relative;margin:24px 0;padding:22px 24px 24px;background:var(--module);border:1px solid var(--line);border-left:2px solid var(--signal);font-family:'Archivo',sans-serif;text-align:left;box-sizing:border-box}
.pnx .pnx__top{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0}
.pnx .pnx__ic{width:28px;height:28px;flex:none;border-radius:7px;margin:0}
.pnx .pnx__ey{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.pnx .pnx__h{margin:0 0 6px;padding:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(19px,2.2vw,23px);line-height:1.25;letter-spacing:0;text-transform:none;color:var(--ink)}
.pnx .pnx__p{margin:0;padding:0;max-width:62ch;font-size:15px;line-height:1.6;color:var(--ink-dim)}
.pnx .pnx__go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 0;padding:0}
.pnx a.btn{margin:0;padding:15px 24px;font-size:12.5px;line-height:1.3;letter-spacing:.08em;color:#04130f;border-bottom:none;text-decoration:none;max-width:100%;box-sizing:border-box}
.pnx a.btn:hover{color:#04130f}
.pnx .pnx__note{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}

/* PrintBus: its amber */
div.pnx.pnx--pb{border-left-color:#ffb329}
.pnx--pb .pnx__ey{color:#ffb329}
.pnx--pb a.btn{background:#ffb329;color:#1a1204}
.pnx--pb a.btn:hover{color:#1a1204}

/* the playable question */
.mctry .mctry__ui{margin:18px 0 0;padding:0}
.mctry .mctry__ui:empty{display:none}
.mctry .mctry__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;padding:0}
.mctry .mctry__play,.mctry .mctry__pp,.mctry .mctry__again{appearance:none;-webkit-appearance:none;margin:0;padding:11px 16px;background:transparent;border:1px solid var(--signal);border-radius:0;color:var(--signal);font-family:'Space Mono',monospace;font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s}
.mctry .mctry__play:hover,.mctry .mctry__pp:hover,.mctry .mctry__again:hover{background:rgba(45,212,191,.1)}
.mctry .mctry__play:disabled{opacity:.65;cursor:progress}
.mctry .mctry__pp{min-width:92px}
.mctry .mctry__hint{font-size:12.5px;color:var(--ink-faint)}
.mctry .mctry__ab{display:inline-flex;margin:0;padding:0;border:1px solid var(--line)}
.mctry .mctry__hear{appearance:none;-webkit-appearance:none;margin:0;padding:11px 16px;background:transparent;border:0;border-radius:0;color:var(--ink-dim);font-family:'Space Mono',monospace;font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mctry .mctry__hear.is-on{background:var(--signal);color:#04130f}
.mctry .mctry__hear:nth-child(2).is-on{background:var(--level)}
.mctry .mctry__ask{margin:20px 0 10px;padding:0;font-size:16px;font-weight:600;line-height:1.4;color:var(--ink)}
.mctry .mctry__ans{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:0;padding:0}
.mctry .mctry__pick{appearance:none;-webkit-appearance:none;margin:0;padding:14px 0;background:var(--screen);border:1px solid var(--line);border-radius:0;color:var(--ink);font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;font-size:24px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.mctry .mctry__pick:hover:not(:disabled){border-color:var(--signal)}
.mctry .mctry__pick:disabled{cursor:default}
.mctry .mctry__pick.is-hit{border-color:var(--signal);color:var(--signal);background:rgba(45,212,191,.08)}
.mctry .mctry__pick.is-miss{border-color:var(--peak);color:var(--peak)}
.mctry .mctry__verdict{margin:14px 0 0;padding:0;max-width:62ch;font-size:14.5px;line-height:1.6;color:var(--ink-dim)}
.mctry .mctry__verdict:empty{display:none}
.mctry .mctry__verdict.is-good::first-line{color:var(--ink)}
.mctry .mctry__again{margin-top:12px}
.mctry .mctry__msg{margin:0;padding:0;font-size:14.5px;line-height:1.6;color:var(--ink-dim)}
@media (max-width:520px){
  .pnx{padding:18px 18px 20px}
  .mctry .mctry__ans{max-width:none}
}