/* My Reboot.
 *
 * Deliberately plainer than the marketing site. Somebody here has already
 * decided; what they want is to find the thing and get on with it, so this is
 * laid out as a board of destinations rather than a page to read.
 */

.face { margin: 0 0 34px; }
.facehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.facehead h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }

/* The state of things, said in words. A bare status word like "submitted"
   tells the person who submitted it nothing they did not already know. */
.standing {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, #9799ae);
  border: 1px solid var(--line, #232733);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--panel, #11131a);
  border: 1px solid var(--line, #232733);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .18s ease, transform .18s ease;
}
.tile:hover { border-color: var(--violet, #a02ef0); transform: translateY(-2px); }
.tile .tmark { display: block; font-size: 19px; line-height: 1; margin-bottom: 9px; }
.tile b { display: block; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 3px; }
.tile span:not(.tmark) { display: block; font-size: 13.5px; color: var(--ink-soft, #9799ae); line-height: 1.45; }

/* Signed out: two doors, nothing else. */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 10px; }
@media (max-width: 620px) { .twoup { grid-template-columns: 1fr; } }
.pick {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--panel, #11131a);
  border: 1px solid var(--line, #232733);
  border-radius: 12px;
  padding: 22px;
}
.pick:hover { border-color: var(--violet, #a02ef0); }
.picktag { display: block; font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.pickwhy { display: block; font-size: 14px; color: var(--ink-soft, #9799ae); }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover { transform: none; }
}