/* "Pick your lead types", step 3 of sign-up. Builds on base.css, auth.css and tell-us-more.css (the pips,
   the pixel checkbox and the wide card); only the tiles and their notes are new. */
.lt-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:4px 3px 18px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:104px;padding:14px 10px;cursor:pointer;
  background:#fff;text-align:center;font:500 20px/1.2 var(--px);color:var(--teal-dark);
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.tile .ck{margin:0}
.tile:hover{background:#fffbe6}
.tile:has(.ck:checked){background:#fffbe6;box-shadow:0 -4px 0 0 var(--teal),0 4px 0 0 var(--teal),-4px 0 0 0 var(--teal),4px 0 0 0 var(--teal)}
.tile:has(.ck:focus-visible){outline:3px dashed var(--pink);outline-offset:7px}
.tag{padding:5px 6px 4px;font:400 8px/1 'Press Start 2P',monospace;color:var(--teal-dark);background:var(--coin)}
.tag.open{color:#fff;background:#1d7a33}
/* coming soon: crossed out in red with a gold tag; ticking one only asks for an email when it opens */
.tile.soon{background:#f6f1e4;color:#7b7f78;box-shadow:0 -3px 0 0 #b9b2a2,0 3px 0 0 #b9b2a2,-3px 0 0 0 #b9b2a2,3px 0 0 0 #b9b2a2}
.tile.soon .nm{text-decoration:line-through 2px;text-decoration-color:var(--red)}
.tile.soon:has(.ck:checked){background:#eef7ff;box-shadow:0 -4px 0 0 var(--sky-deep),0 4px 0 0 var(--sky-deep),-4px 0 0 0 var(--sky-deep),4px 0 0 0 var(--sky-deep)}
.tile .bell{display:none;font:700 13px/1.2 var(--body);color:var(--sky-deep)}
.tile.soon:has(.ck:checked) .bell{display:block}
.lt-hint,.lt-note{margin:0 0 12px;font:600 14px/1.5 var(--body);color:var(--muted);text-align:center}
.lt-note{min-height:3em;color:var(--teal-dark)}
.lt-note.none{color:var(--muted)}
.cta[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
.cta[disabled]:active{transform:none}
form .demo-note{display:block;width:fit-content;margin:0 auto 16px}
@media (max-width:420px){
  .lt-tiles{gap:12px}
  .tile{font-size:18px;min-height:96px}
}