/* Mac app introduction, extending the site's ink, paper and blue system. */
.mac-landing .mac-hero { padding-block: 80px 96px; }
.mac-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: end; margin-bottom: 56px; }
.mac-intro h1 { font-size: clamp(44px, 4.7vw, 68px); letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.mac-intro .lead { font-size: 21px; max-width: 42ch; }
.mac-intro .actions { display: flex; align-items: center; flex-wrap: wrap; margin-top: 28px; gap: 16px 20px; }
.mac-intro .mac-requirements { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.mac-text-link { font-weight: 500; text-underline-offset: 5px; }
.mac-workspace { margin: 0; padding: 40px 40px 24px; background: var(--blue); border-radius: 16px; }
.mac-landing figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.mac-workspace figcaption { color: var(--white); text-align: center; margin-top: 24px; font-size: 15px; }
.mac-landing .mac-workflow { padding-block: 24px 96px; }
.mac-section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-bottom: 56px; }
.mac-section-heading h2, .mac-close h2 { font-size: clamp(34px, 3.5vw, 48px); letter-spacing: -.04em; }
.mac-feature { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 72px; align-items: center; padding-block: 48px; border-top: 1px solid var(--line); }
.mac-feature h3, .mac-edit h3 { font-size: clamp(26px, 2.4vw, 34px); }
.mac-feature p, .mac-edit p { margin-top: 20px; max-width: 56ch; color: var(--ink-2); font-size: 19px; }
.mac-feature figure { margin: 0; padding: 24px; background: var(--paper); border-radius: 16px; }
.mac-edit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; padding-top: 48px; border-top: 1px solid var(--line); }
.mac-edit p { margin-top: 0; }
.mac-edit ul { margin: 24px 0 0; padding-left: 20px; color: var(--ink-2); }
.mac-edit li + li { margin-top: 10px; }
.mac-landing .mac-present { background: var(--ink); color: var(--white); padding-block: 88px; }
.mac-present .lead, .mac-present p { color: #d4d4d4; }
.mac-present figure { margin: 0 auto 48px; width: 100%; }
.mac-landing .mac-practical, .mac-landing .mac-setup { padding-block: 80px; }
.mac-practical .mac-section-heading, .mac-setup .mac-section-heading { margin-bottom: 0; }
.mac-setup { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mac-format-list { margin: 28px 0 0; }
.mac-format-list > div { padding-block: 20px; border-top: 1px solid var(--line); }
.mac-format-list dt { font: 700 19px/1.4 var(--font-brand); }
.mac-format-list dd { margin: 8px 0 0; color: var(--ink-2); line-height: 1.65; }
.mac-guide-link { margin-top: 20px; color: var(--ink-2); line-height: 1.65; }
.mac-setup-steps { margin: 28px 0 0; padding-left: 24px; color: var(--ink-2); }
.mac-setup-steps li { padding-left: 6px; line-height: 1.65; }
.mac-setup-steps li + li { margin-top: 24px; }
.mac-setup-steps strong { color: var(--ink); }
.mac-landing #faq { border-bottom: 1px solid var(--line); }
.mac-landing .faq summary svg { flex-shrink: 0; }
.mac-landing .mac-close { padding-block: 96px; text-align: center; }
.mac-close .lead { margin: 24px auto 28px; }
.mac-landing footer { border-top: 1px solid var(--line); padding-block: 32px; }
.mac-landing .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.mac-landing footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media (max-width: 1000px) {
  .mac-intro, .mac-section-heading, .mac-feature, .mac-edit { gap: 36px; }
  .mac-landing .nav { gap: 18px; }
}
@media (max-width: 720px) {
  .mac-landing .top .wrap { gap: 12px; }
  .mac-landing .brand { font-size: 17px; }
  .mac-landing .nav a.btn-primary { padding-inline: 12px; font-size: 13px; }
  .mac-landing .mac-hero { padding-block: 44px 56px; }
  .mac-intro, .mac-section-heading, .mac-feature, .mac-edit { grid-template-columns: 1fr; gap: 24px; }
  .mac-intro { margin-bottom: 32px; }
  .mac-intro .lead { font-size: 19px; }
  .mac-intro .actions { flex-wrap: wrap; }
  .mac-workspace { padding: 12px 12px 18px; }
  .mac-workspace figcaption { font-size: 14px; margin-top: 16px; }
  .mac-landing .mac-workflow { padding-block: 16px 56px; }
  .mac-section-heading { margin-bottom: 32px; }
  .mac-feature { padding-block: 32px; }
  .mac-feature figure { padding: 12px; }
  .mac-edit { padding-top: 32px; }
  .mac-landing .mac-present, .mac-landing .mac-close, .mac-landing .mac-practical, .mac-landing .mac-setup { padding-block: 56px; }
}
@media (max-width: 370px) {
  .mac-landing .top .brand span { display: none; }
}