:root {
  --pageBackground: #f6f1e8;
  --pageAccent: #d8c3a2;
  --surfaceColor: #fffaf2;
  --textColor: #23201c;
  --mutedColor: #5f564d;
  --lineColor: rgba(35, 32, 28, 0.12);
  --shadowColor: rgba(35, 32, 28, 0.08);
  --ctaColor: #23201c;
  --ctaTextColor: #fffaf2;
  --pageMaxWidth: 72rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--textColor);
  background:
    radial-gradient(circle at top left, rgba(216, 195, 162, 0.72), transparent 38%),
    linear-gradient(180deg, #fbf7f0 0%, var(--pageBackground) 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

.landingPage {
  width: min(calc(100% - 2rem), var(--pageMaxWidth));
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

.brandBar {
  padding: 0.5rem 0 1.5rem;
}

.brandBar {
  .brandBar-link {
    display: inline-flex;
    align-items: center;
  }

  .brandBar-logo {
    width: min(18rem, 100%);
    height: auto;
    display: block;
  }
}

.heroPanel {
  padding: 1.5rem;
  border: 1px solid var(--lineColor);
  border-radius: 1.5rem;
  background:
    linear-gradient(145deg, rgba(255, 250, 242, 0.98), rgba(246, 241, 232, 0.9)),
    var(--surfaceColor);
  box-shadow: 0 1.25rem 3rem var(--shadowColor);
}

.heroPanel {
  .heroPanel-actions {
    margin-top: 0;
  }

  .heroPanel-primaryLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1.35rem;
    border-radius: 999px;
    background: var(--ctaColor);
    color: var(--ctaTextColor);
    font-weight: 700;
  }
}

.detailStrip {
  margin-top: 1rem;
  padding: 1rem 0.25rem 0;
}

.detailStrip {
  .detailStrip-copy {
    margin: 0;
    color: var(--mutedColor);
    font-size: 0.95rem;
  }
}

.siteFooter {
  width: min(calc(100% - 2rem), var(--pageMaxWidth));
  margin: 0 auto;
  padding-bottom: 1.5rem;
}

.siteFooter {
  .siteFooter-inner {
    padding-top: 1rem;
    border-top: 1px solid var(--lineColor);
  }

  .siteFooter-copy {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mutedColor);
  }
}

@media (width >= 768px) {
  .landingPage {
    padding: 1.5rem 0 4rem;
  }

  .brandBar {
    padding-bottom: 2rem;
  }

  .heroPanel {
    padding: 3rem;
  }

  .detailStrip {
    padding-top: 1.25rem;
  }
}

@media (width >= 1024px) {
  .landingPage {
    padding-top: 2rem;
  }

  .heroPanel {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

}