/* Home: three doors into the tabs. One line of proof each, no boxes. */
.doors-section { padding-top: 24px; }
.doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.doors > li + li .door { border-left: 1px solid var(--line); }
.door {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 18px;
  padding: 36px 32px 32px;
  text-decoration: none;
  transition: background-color .3s var(--ease);
}
.doors > li:first-child .door { padding-left: 0; }
.doors > li:last-child .door { padding-right: 0; }
/* the top rule lights up on hover, like a tab being picked */
.door::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.door:hover::before, .door:focus-visible::before { transform: scaleX(1); }
.door-no { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.door-t { font: 600 clamp(22px, 2.1vw, 28px)/1.12 var(--display); letter-spacing: -0.02em; color: var(--fg); max-width: 18ch; }
.door-d { color: var(--fg-muted); font-size: 15px; line-height: 1.55; max-width: 36ch; flex: 1; }
.door-d b { color: var(--fg); font-weight: 600; }
.door-go { font-size: 14px; font-weight: 600; color: var(--fg); display: inline-flex; gap: 8px; }
.door-go i { font-style: normal; color: var(--brand); transition: transform .3s var(--ease); }
.door:hover .door-go i { transform: translateX(5px); }

@media (max-width: 900px) {
  .doors { grid-template-columns: 1fr; }
  .doors > li + li .door { border-left: 0; border-top: 1px solid var(--line); }
  .door, .doors > li:first-child .door, .doors > li:last-child .door { padding: 28px 0; }
}