/* Oklart's front page. Type, colours, buttons and the light and dark switch come from mail/mail.css.
   Here is only what this page has of its own: the rows that lead to each program. */

.hero .lead { margin-top: 44px; max-width: 600px; text-wrap: pretty; }

.doors { padding-top: 120px; }
/* One program: its name set as large as the headline, and beside it what it is and the two ways on. */
.door { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 80px; align-items: end; }
.door + .door { margin-top: 90px; }
.door h3 { font-size: clamp(46px, 8.6vw, 132px); font-weight: 600; line-height: 0.96; letter-spacing: -0.058em; margin-left: -0.04em; }
.door h3 a { text-decoration: none; }
.door h3 a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; }
.door-text { max-width: 560px; padding-bottom: 0.9vw; }
.door-text p { font-size: 22px; line-height: 1.36; letter-spacing: -0.01em; color: var(--read); text-wrap: pretty; }
.door-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 30px; }
.door-links a:not(.btn) { color: var(--ink); font-size: 18px; }

@media (max-width: 980px) {
  .doors { padding-top: 90px; }
  .door { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .door-text { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .hero .lead { margin-top: 28px; }
  .doors { padding-top: 64px; }
  .door-text p { font-size: 19px; }
  .door-links .btn { width: 100%; }
}