:root {
    --ink: #0f172a;
    --muted: #475569;
    --bar-bg: #ffffff; /* header/footer background */
    --copy-bg: #F5F5F7; /* section background */
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    margin: 0;
    background: #fff;
}

/* Top/Bottom bars */
.topbar, .bottombar {
    background: var(--bar-bg);
    margin: 15px 0px 15px 0px;
}
.topbar { border-bottom: none; }
.bottombar { border-top: none; border-bottom: none; }
.bar-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { font-weight: 700; }
/* Keep brand link looking like plain text */
.brand a { color: inherit; text-decoration: none; }
.brand a:hover, .brand a:focus, .brand a:active, .brand a:visited { color: inherit; text-decoration: none; }
.copyright {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bar-links a {
    color: var(--muted);
    text-decoration: none;
    margin-left: 16px;
    font-size: 14px;
}
.bar-links a:hover { text-decoration: underline; }

/* Banners */
.banner-image {
    width: 100%;
}
.banner-image img {
    width: 100%;
    height: auto;
    display: block;
}
/* Constrain banner content to 1280px while staying centered */
.banner-image {
  display: flex;
  justify-content: center;
}
.banner-image img {
  max-width: 1280px;
}

/* Intro / copy sections */
.intro, .copy-section {
  padding: 48px 16px;
  display: flex;
  align-items: center; /* vertical centering */
  min-height: 300px;
  position: relative;
}
/* Create a centered background that does not exceed 1280px */
.intro::before, .copy-section::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1280px);
  top: 0;
  bottom: 0;
  background: var(--copy-bg);
  z-index: 0;
}
.intro .content-container,
.copy-section .content-container { max-width: 720px; width: 100%; position: relative; z-index: 1; }
.content-container {
    max-width: 900px;
    margin: 0 auto;
}
.page-max { max-width: 1280px; margin: 0 auto; }
/* Narrower content for intro/copy; text remains justified via paragraph rule */
.intro .content-container { max-width: 720px; }
.eyebrow {
  font-size: 24px;
  margin: 0 0 0px;
  text-align: center;
}
.copy-section h2 {
    font-size: 24px; /* match eyebrow */
    margin: 0 0 16px;
    text-align: center;
}
.copy p { color: var(--muted); text-align: justify; font-size: 16px; line-height: 1.5; }
.copy li { color: var(--muted); font-size: 16px; line-height: 1.5; }
.copy ul, .copy ol { padding-left: 1.2rem; }
.intro .content-container p { text-align: center; font-size: 16px; line-height: 1.5; }

/* App store button image */
.download-button img {
  height: 44px;
  width: auto;
  display: inline-block;
}

/* Animations */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  .bar-links a { margin-left: 12px; }
  .copy-section h2, .eyebrow { font-size: 20px; }
  .intro, .copy-section { padding: 32px 16px; min-height: 0; }
  .bar-links a { font-size: 13px; }
  
  /* Bottom bar responsive behavior */
  .bottombar .bar-container {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .copyright {
    text-align: center;
    line-height: 1.4;
  }
  
  .bar-links {
    display: flex;
    /*flex-direction: column;*/
    gap: 8px;
    align-items: center;
  }
  
  .bar-links a {
    margin-left: 0;
  }
}