/* The landing introduction shares one surface, with the product as its focal point. */
.landing-page { --header-height: 94px; }
.landing-page .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  border: 0;
  color: var(--white);
  background: var(--forest);
  transition: box-shadow .2s ease;
}
.landing-page .site-header.is-scrolled { box-shadow: 0 6px 24px rgb(10 29 24 / 20%); }
.landing-page main, .landing-page main > section[id] { scroll-margin-top: calc(var(--header-height) + 24px); }
.landing-page .skip-link { position: fixed; z-index: 110; }
.landing-page .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
}
.landing-page .site-header .wordmark { font-size: 35px; }
.landing-page .site-header .wordmark span { color: var(--lime); }
.landing-page .desktop-nav { justify-content: center; gap: clamp(24px, 3vw, 42px); }
.landing-page .desktop-nav a:hover { color: var(--lime); }
.landing-page .header-demo {
  border: 0;
  color: var(--forest);
  background: var(--white);
  font-size: 13px;
  font-weight: 750;
}
.landing-page .header-demo:hover { background: var(--lime); }
.header-menu { display: none; }

.hero-section {
  color: var(--white);
  background: radial-gradient(ellipse at 88% 50%, rgb(103 145 76 / 28%), transparent 58%), var(--forest);
}
.landing-page .hero {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  grid-template-areas: "copy visual" "actions actions";
  align-items: center;
  column-gap: clamp(32px, 4vw, 58px);
  row-gap: 46px;
  min-height: 0;
  padding-block: 52px 62px;
}
.landing-page .hero-copy { grid-area: copy; max-width: none; padding: 0; }
.landing-page .hero-copy > .eyebrow { margin-bottom: 24px; color: var(--lime); }
.landing-page .eyebrow-dot { flex: none; background: var(--lime); box-shadow: 0 0 0 4px rgb(216 237 145 / 10%); }
.landing-page .hero h1 {
  margin-bottom: 24px;
  font-size: clamp(46px, 4.7vw, 68px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.055em;
}
.landing-page .hero h1 span, .landing-page .hero h1 em { display: block; }
.landing-page .hero h1 em { color: var(--lime); }
.landing-page .hero-lead { max-width: 480px; margin: 0; color: #d5e2d9; font-size: 18px; line-height: 1.65; }
.landing-page .hero-lead strong { color: var(--white); font-weight: 650; }
.landing-page .hero-visual {
  grid-area: visual;
  width: 100%;
  justify-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-computer-image { display: block; width: 100%; height: auto; }
.hero-computer figcaption { margin-top: 10px; color: #bfd1c5; font-size: 10px; line-height: 1.4; text-align: center; }
.landing-page .hero-bottom { grid-area: actions; text-align: center; }
.landing-page .hero-actions { justify-content: center; flex-direction: row; gap: 16px; }
.landing-page .hero-actions .button { min-width: 235px; min-height: 60px; padding-inline: 28px; font-size: 17px; }
.hero-primary { color: var(--forest); background: var(--lime); }
.hero-primary:hover { background: #e6f4b9; }
.hero-secondary { border: 1px solid rgb(255 255 255 / 28%); color: var(--white); background: rgb(255 255 255 / 8%); }
.hero-secondary:hover { background: rgb(255 255 255 / 15%); }
.landing-page .experience { justify-content: center; gap: 10px; margin-top: 22px; color: #bfd1c5; font-size: 12px; }
.landing-page .experience strong { color: #e4ede7; }
.landing-page .experience-mark { width: 28px; height: 28px; flex: none; border-color: rgb(255 255 255 / 20%); color: var(--lime); font-size: 15px; }

/* Stack at 900px so the illustration and title have enough room on tablets and phones. */
@media (max-width: 900px) {
  .landing-page { --header-height: 76px; }
  .landing-page .site-header { min-height: 76px; height: 76px; }
  .landing-page .header-inner { min-height: 76px; grid-template-columns: 1fr auto; padding-block: 0; }
  .landing-page .site-header .wordmark { font-size: 32px; }
  .landing-page .site-header .desktop-nav, .landing-page .header-demo { display: none; }
  .header-menu { position: relative; display: block; }
  .header-menu summary { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 10px; cursor: pointer; list-style: none; }
  .header-menu summary::-webkit-details-marker { display: none; }
  .header-menu summary:hover { background: rgb(255 255 255 / 8%); }
  .header-menu summary:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
  .menu-icon { display: grid; width: 23px; gap: 5px; }
  .menu-icon i { display: block; height: 2px; border-radius: 2px; background: var(--white); }
  .header-menu[open] .menu-icon i:first-child { transform: translateY(7px) rotate(45deg); }
  .header-menu[open] .menu-icon i:nth-child(2) { opacity: 0; }
  .header-menu[open] .menu-icon i:last-child { transform: translateY(-7px) rotate(-45deg); }
  .landing-page .header-menu nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10;
    display: flex;
    width: min(290px, calc(100vw - 40px));
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--forest);
    background: var(--ivory);
    box-shadow: 0 18px 38px rgb(0 0 0 / 20%);
  }
  .landing-page .header-menu nav a { display: block; padding: 14px; border-radius: 8px; font-size: 14px; }
  .landing-page .header-menu nav a:hover { color: var(--forest); background: var(--sage); }
  .landing-page .header-menu nav a:last-child { margin-top: 5px; background: var(--lime); }
  .landing-page .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "copy" "actions";
    gap: 32px;
    padding-block: 26px 52px;
  }
  .landing-page .hero-visual { width: min(100%, 650px); }
  .landing-page .hero-copy { width: 100%; max-width: 660px; margin-inline: auto; text-align: center; }
  .landing-page .hero-copy > .eyebrow { justify-content: center; margin-bottom: 17px; }
  .landing-page .hero h1 { max-width: 660px; margin-inline: auto; font-size: clamp(40px, 7vw, 58px); }
  .landing-page .hero-lead { max-width: 580px; margin-inline: auto; font-size: 17px; }
  .landing-page .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .landing-page .hero-actions .button { width: min(100%, 330px); min-height: 56px; }
  .landing-page .experience { max-width: 430px; margin-inline: auto; line-height: 1.5; }
}

@media (max-width: 560px) {
  .landing-page .hero { gap: 28px; padding-block: 16px 44px; }
  .hero-computer figcaption { margin-top: 6px; font-size: 9px; }
  .landing-page .hero-copy > .eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .02em; }
  .landing-page .hero h1 { margin-bottom: 19px; font-size: clamp(36px, 10vw, 48px); }
  .landing-page .hero-lead { font-size: 16px; line-height: 1.6; }
  .landing-page .hero-actions .button { min-width: 0; width: min(100%, 320px); font-size: 16px; }
  .landing-page .experience { max-width: 310px; font-size: 11px; }
}