/* CodeWeb for Mac — the homepage section and the hero's download button.
   Same ground, type and buttons as the rest of the page. */

.DesktopSection { display: none; }
body.is-home .DesktopSection { display: block; }

.DesktopSection {
  background-color: #2a2e32;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  padding: 120px 40px 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.DesktopSection .inner { max-width: 1180px; margin: 0 auto; }

.DesktopSection .eyebrow {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f05c8a;
  margin-bottom: 18px;
}

.DesktopSection h2 { margin: 0 0 20px; }

.DesktopSection h3 {
  font-family: "PT Serif", serif;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 10px;
}

.DesktopSection p { font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, 0.82); max-width: 760px; }
.DesktopSection p + p { margin-top: 14px; }
.DesktopSection strong { font-weight: 500; color: #fff; }

.DesktopSection .lead p { font-size: 19px; line-height: 31px; }

.DesktopActions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 36px; }

.DesktopActions .SignUpButton,
.HeroDownload .SignUpButton {
  display: inline-block;
  margin-top: 0;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.DesktopActions .secondary {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
}
.DesktopActions .secondary:hover { border-bottom-color: #fff; }

.DesktopActions .meta {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.DesktopShot {
  margin: 64px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0e0e0e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.DesktopShot img { display: block; width: 100%; height: auto; }

.DesktopCaption {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
}

.DesktopGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 48px;
  margin-top: 110px;
}

.DesktopFeature .frame {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0e0e0e;
  margin-bottom: 22px;
  overflow: hidden;
}
.DesktopFeature .frame img { display: block; width: 100%; height: auto; transition: transform 0.6s ease; }
.DesktopFeature:hover .frame img { transform: scale(1.02); }
.DesktopFeature .tag {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.DesktopFeature p { font-size: 15px; line-height: 25px; }

.DesktopMore {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 100px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.DesktopMore h4 {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #fff;
}
.DesktopMore p { font-size: 14px; line-height: 23px; color: rgba(255, 255, 255, 0.7); }

.DesktopKeys { margin-top: 10px; }
.DesktopKeys kbd {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1px 6px;
  margin-right: 4px;
  color: #fff;
}

.DesktopInstall {
  margin-top: 90px;
  padding: 36px 40px;
  background: #212629;
  border-left: 3px solid #f05c8a;
}
.DesktopInstall h3 { font-size: 22px; line-height: 30px; }
.DesktopInstall p { font-size: 15px; line-height: 25px; max-width: none; }
.DesktopInstall code {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  word-break: break-all;
}

.DesktopFooter {
  margin-top: 70px;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 20px;
  word-break: break-all;
}

/* In the hero, beside "Sign up for beta". */
.HeroDownload {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}
.HeroDownload .SignUpButton { margin-top: 0; }
.HeroDownload .note {
  margin-top: 14px;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.HeroDownload .note a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.HeroDownload .note a:hover { border-bottom-color: #fff; }

@media (max-width: 900px) {
  .DesktopSection { padding: 80px 20px 60px; }
  .DesktopGrid { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 70px; }
  .DesktopMore { grid-template-columns: minmax(0, 1fr); }
  .DesktopSection h2 { font-size: 36px; line-height: 46px; }
  .DesktopInstall { padding: 26px 22px; }
}

/* The header's About link: no box, no rule, just the word. */
.UserLogin a.AboutLink,
.UserLogin a.AboutLink:hover {
  border: none;
  margin: 0;
  padding: 10px 0;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.UserLogin a.AboutLink:hover { color: #f05c8a; }
html { scroll-behavior: smooth; }