/* --------------------
   Base / Reset
-------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Smooth, readable base size on mobile */
  font-size: 16px; /* good base for mobile readability [web:4][web:5] */
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: #1f2933;
  background-color: #f9fafb;
}

/* Make images responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Basic link style */
a {
  color: inherit;
  text-decoration: none;
}

/* --------------------
   Layout / Containers
-------------------- */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Use a centered, padded column for content */
header,
main,
section {
  padding: 1.5rem 1.25rem;
}

main {
  flex: 1;
}

/* Optional max-width so it looks nice on large screens too */
body > header,
body > main {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------
   Header
-------------------- */

header {
  text-align: left;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Logo */
header img {
  margin: 0 0 1.5rem 0; /* on its own line, aligned left */
  border-radius: 0.5rem;
}

/* Main heading */
header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
}

/* Subheading */
header h2 {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 0.75rem 0;
  color: #4b5563;
}

/* "Start Here" line */
header p {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  margin-top: 0.75rem;
  color: #2563eb;
}

/* --------------------
   Typography
-------------------- */

main h2 {
  font-size: 1.3rem;
  margin: 1.5rem 0 0.75rem 0;
}

main h3 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.5rem 0;
}

main p {
  font-size: 0.98rem;
  margin: 0 0 0.75rem 0;
  color: #111827;
}

/* Global list styling */
ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0 0.75rem 0;
}

li {
  margin-bottom: 0.5rem;
  font-size: 0.96rem;
}

/* Improve readability of bullets on mobile */
li::marker {
  color: #2563eb;
}

/* Last call-to-action heading */
main > h2:last-of-type {
  text-align: center;
  margin-top: 2rem;
}

/* --------------------
   Sections
-------------------- */

section {
  background-color: #ffffff;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

/* Inner spacing so text doesn't touch edges */
section > *:first-child {
  margin-top: 0;
}

/* --------------------
   Helpers
-------------------- */

/* Emphasize the final tagline paragraph */
main > p:last-of-type {
  text-align: center;
  font-weight: 500;
  margin-top: 1.5rem;
}

/* Tap-friendly spacing */
section,
header {
  scroll-margin-top: 4rem;
}

/* --------------------
   Media Queries
   (Enhancements for wider screens)
-------------------- */

/* Large phones / small tablets and up */
@media (min-width: 480px) { /* common content-first breakpoint [web:5] */
  header h1 {
    font-size: 1.9rem;
  }
  header h2 {
    font-size: 1.15rem;
  }
  main h2 {
    font-size: 1.45rem;
  }
  main h3 {
    font-size: 1.25rem;
  }
}

/* Tablets and small laptops */
@media (min-width: 768px) { /* typical tablet breakpoint [web:5] */
  header,
  main {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Keep header stacked and left-aligned on larger screens */
  header {
    text-align: left;
  }

  header img {
    height: clamp(22px, 3vw, 42px);
    width: auto;
    max-width: 100%;
    margin: 0 0 1.5rem 0;
    border-radius: 0.5rem;/* still on its own line */
  }

  /* Place sections on a soft grid while keeping them readable */
  main {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr);
    gap: 1.25rem;
  }

  main > p,
  main > h2 {
    grid-column: 1 / -1;
  }
}

/* Desktops */
@media (min-width: 1024px) { /* laptop breakpoint [web:5] */
  body > header,
  body > main {
    max-width: 960px;
  }

  main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Make first intro section span both columns */
  main > section:first-of-type {
    grid-column: 1 / -1;
  }

  /* Keep the final CTA centered and spanning full width */
  main > p:last-of-type,
  main > h2:last-of-type {
    grid-column: 1 / -1;
  }
}