/* The Desk page: the product page for the Mac and Windows app. Dark unless
   HQ sets the page's look to light. */
.deskpage .hero { padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); text-align: center; }
.deskpage .hero .eyebrow { color: var(--grey); margin-bottom: 14px; }
.deskpage .hero h1 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -.04em; }
.deskpage .hero .lead { max-width: 33em; margin: clamp(18px, 2vw, 28px) auto 28px; }
.deskpage .hero .btns { justify-content: center; }
.deskpage .hero .small { margin-top: 12px; }
.deskpage .hero .small a { color: var(--link); }
.deskpage .hero .shot { margin-top: clamp(40px, 6vw, 84px); perspective: 1700px; }
.feature { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(56px, 8vw, 120px) 0; border-top: 1px solid var(--line-soft); perspective: 1700px; }
.feature:nth-child(even) .words { order: 2; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.feature .eyebrow { color: var(--grey); margin-bottom: 12px; }
.feature h2 { font-size: clamp(28px, 3.4vw, 46px); }
.feature .words > p:not(.eyebrow) { color: var(--grey); margin-top: 16px; font-size: clamp(17px, 1.4vw, 19px); }
.feature ul { list-style: none; padding: 0; margin-top: 18px; color: var(--grey); }
.feature li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.feature li b { color: var(--ink); font-weight: 600; }
.plain { padding: clamp(56px, 8vw, 120px) 0 0; border-top: 1px solid var(--line-soft); }
.plain:last-of-type { padding-bottom: clamp(72px, 9vw, 128px); }
.plain .eyebrow { color: var(--grey); margin-bottom: 12px; }
.plain .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.plain .card h3 { font-size: 21px; margin-bottom: 10px; }
.plain .card p { color: var(--grey); }
.plain .card ul, .plain .card ol { color: var(--grey); padding-left: 1.2em; margin-top: 10px; }
.plain .card li { margin: 9px 0; }
.plain .card li b { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) {
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; }
  .feature:nth-child(even) .words { order: 0; }
  .plain .grid2 { grid-template-columns: 1fr; }
}
/* The sign-in that stands in front of it. */
.gate { max-width: 460px; margin-inline: auto; padding: clamp(64px, 10vw, 140px) var(--gutter) clamp(72px, 9vw, 128px); }
.gate .eyebrow { color: var(--grey); margin-bottom: 12px; }
.gate h1 { font-size: clamp(40px, 6vw, 64px); }
.gate > p { color: var(--grey); margin-top: 16px; }
.gate .form { margin-top: 28px; max-width: none; }
.gate .small { margin-top: 18px; }