/* The Mac landing page shares the site's navigation and uses a static product illustration. */
.macPage .homeSiteShell {
  background: radial-gradient(ellipse at 50% 48%, #15264b 0, #0c1226 30%, #070816 64%);
}

.macHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3rem, 5vw, 5rem) var(--page-pad) 3.5rem;
  text-align: center;
}

.macAppIcon { width: 116px; height: 116px; margin-bottom: 1rem; }
.macHero h1 { font-size: clamp(3.25rem, 6.5vw, 5.5rem); font-weight: 580; line-height: 1.08; letter-spacing: -0.065em; }
.macLead { margin-top: 1.3rem; color: #b2bbd3; font-size: clamp(1.125rem, 2vw, 1.35rem); line-height: 1.6; letter-spacing: -0.025em; }
.macPage .macDownload { gap: 0.8rem; min-height: 54px; margin-top: 2rem; padding-inline: 1.45rem; font-size: 1rem; box-shadow: 0 2px 12px #0002; }
.macDownload img { filter: brightness(0); }
.macDownload > span { margin-left: 0.6rem; }
.macRequirements { margin-top: 0.85rem; color: #9ba6c2; font-size: var(--type-meta); line-height: 1.6; }
.macBrowserLink { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 0.65rem; color: #b3c9f4; font-size: var(--type-label); }
.macBrowserLink:hover { color: #fff; }

.macPreview { width: min(calc(100% - 2 * var(--page-pad)), 1000px); margin: 0 auto; }
.macWindow { overflow: hidden; border: 1px solid #808caa; border-radius: 14px; background: #f5f7ff; color: #101426; box-shadow: 0 45px 100px #0006, 0 0 0 5px #ffffff05; }
.macWindowBar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 42px; padding: 0 16px; border-bottom: 1px solid #d8def0; background: #eff1f8; color: #59627a; font-size: 13px; font-weight: 550; }
.macTrafficLights { display: flex; gap: 8px; }
.macTrafficLights i { width: 11px; height: 11px; border-radius: 50%; background: #ff6058; box-shadow: inset 0 0 0 1px #00000010; }
.macTrafficLights i:nth-child(2) { background: #ffbd2e; }
.macTrafficLights i:nth-child(3) { background: #28c840; }
.macWindowToolbar { justify-self: end; font-size: 18px; }
.macWindowBody { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.macSidebar { display: flex; flex-direction: column; padding: 24px 16px 18px; background: #090b18; color: #bbc3dc; font-size: 13px; }
.macSidebarMark { width: 62px; height: auto; margin: 0 8px 24px; }
.macWorkspace { display: flex; gap: 10px; align-items: center; padding: 12px 8px; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; color: #f4f7ff; font-size: 13px; }
.macWorkspaceIcon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffff1c; border-radius: 7px; background: #1d2440; font-size: 12px; }
.macWorkspacePlan { display: block; margin-top: 4px; color: #a3adc7; font-size: 11px; }
.macChevron { margin-left: auto; }
.macNavLabel { margin: 26px 10px 10px; color: #a3adc7; font-size: 11px; font-weight: 550; }
.macNavItem { display: flex; align-items: center; gap: 10px; min-height: 37px; margin-bottom: 3px; padding: 0 10px; border-radius: 6px; }
.macNavItem > span { width: 16px; font-size: 17px; text-align: center; }
.macNavCurrent { background: #192342; color: #b9cfff; }
.macSidebarBottom { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 28px 8px 0; font-size: 12px; }
.macPerson { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #ffffff24; border-radius: 50%; font-size: 11px; }
.macConversation { min-width: 0; padding: 30px 30px 26px; }
.macConversationHeading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.macConversationHeading h2 { font-size: 25px; font-weight: 620; letter-spacing: -0.045em; }
.macFollowing { display: inline-flex; align-items: center; gap: 6px; color: #247a4a; font-size: 12px; }
.macFollowing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.macConversationTools { display: flex; gap: 12px; margin: 20px 0; color: #59627a; font-size: 12px; }
.macChannel { display: flex; align-items: center; justify-content: space-between; min-width: 130px; padding: 10px 12px; border: 1px solid #d8def0; border-radius: 7px; background: #fff; color: #101426; }
.macSearch { display: flex; flex: 1; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid #d8def0; border-radius: 7px; background: #fff; }
.macSearch > span { font-size: 17px; line-height: 1; }
.macMessages { overflow: hidden; border: 1px solid #d8def0; border-radius: 9px; background: #fff; }
.macDate { padding: 14px 20px; border-bottom: 1px solid #edf1fb; color: #59627a; font-size: 11px; }
.macMessages ol { margin: 0; padding: 0; list-style: none; }
.macMessage { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 20px; }
.macMessage + .macMessage { border-top: 1px solid #edf1fb; }
.macAgent { display: grid; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #dae2f6; border-radius: 7px; font-size: 12px; font-weight: 600; }
.macAgentBlue { background: #eaf0ff; color: #315fcb; }
.macAgentOrange { border-color: #efdfd7; background: #fcf0e8; color: #936048; }
.macMessageMeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; }
.macMessageMeta strong { font-size: 13px; font-weight: 630; }
.macMessageMeta > span { color: #59627a; font-size: 11px; }
.macMessageMeta time { margin-left: auto; color: #59627a; font-size: 11px; }
.macMessage p { max-width: 60ch; margin-top: 8px; color: #364057; font-size: 14px; line-height: 1.65; }
.macConversationFooter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid #edf1fb; padding: 12px 20px; color: #59627a; font-size: 11px; }
.macConversationFooter > span:last-child > span { margin-left: 4px; color: #247a4a; }
.macPreview figcaption { margin-top: 1.5rem; color: #c4cce2; font-size: var(--type-label); line-height: 1.6; text-align: center; }
.macPreview figcaption span { margin-left: 0.4rem; color: #919dbb; font-size: var(--type-meta); }

.macDetails { padding: 3rem var(--page-pad) 4.5rem; color: #b2bbd3; text-align: center; }
.macBenefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin: 0 0 2rem; padding: 0; list-style: none; color: #e7ecfb; font-size: 15px; }
.macBenefits li { display: flex; align-items: center; gap: 0.65rem; }
.macBenefits li::before { content: "✓"; color: #86b0ff; }
.macDetails > p { font-size: var(--type-label); line-height: 1.8; }
.macDetails .macConnectionNote { margin-top: 0.25rem; color: #919dbb; font-size: var(--type-meta); }
.macPage .siteFooter { padding-block: 0; }
.macPage .footerBottom { margin-top: 0; border-top: 0; }
.macPage .siteFooter nav { display: flex; flex-wrap: wrap; justify-self: end; gap: 1.5rem; }
.macPage .siteFooter nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--type-meta); }
.macPage .siteFooter nav a:hover { color: #fff; }

@media (max-width: 760px) {
  .macHero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .macAppIcon { width: 96px; height: 96px; }
  .macWindowBody { grid-template-columns: 148px minmax(0, 1fr); }
  .macSidebar { padding-inline: 10px; }
  .macConversation { padding: 22px 18px; }
  .macMessage { padding: 16px; gap: 10px; }
  .macMessageMeta > span { display: none; }
  .macPage .footerBottom { grid-template-columns: 1fr; gap: 0.75rem; }
  .macPage .footerBottom p { text-align: left; }
  .macPage .siteFooter nav { justify-self: start; }
}

@media (max-width: 540px) {
  .macPreview { width: calc(100% - 2rem); }
  .macWindowBody { grid-template-columns: minmax(0, 1fr); }
  .macSidebar { display: none; }
  .macConversation { padding: 20px 14px 16px; }
  .macConversationHeading h2 { font-size: 23px; }
  .macConversationTools { gap: 8px; margin: 16px 0; }
  .macChannel { min-width: 102px; padding-inline: 10px; }
  .macMessage { grid-template-columns: 26px minmax(0, 1fr); padding: 16px 12px; }
  .macAgent { width: 26px; height: 26px; }
  .macConversationFooter { padding-inline: 12px; }
  .macPreview figcaption span { display: block; margin-left: 0; }
  .macBenefits { flex-direction: column; align-items: center; gap: 1rem; }
  .macDetails { padding-top: 2.5rem; padding-bottom: 3rem; }
}

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