/* Landing page — narrower, more breathing room */

/* Narrower container for landing page (Pico default is 1280px) */
body {
  --pico-container-max-width: 960px;
}

/* Vertical rhythm between sections */
body > section,
body > header,
body > footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Alternating section backgrounds for visual separation */
body > section.alt {
  background-color: #fafaf7; /* sand-50 */
}

/* Hero — centered, extra vertical space */
body > section:first-of-type {
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}

body > section:first-of-type p {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Section headings — space below before content */
section h2 {
  margin-bottom: 2rem;
}

section hgroup {
  margin-bottom: 2rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid cards — more gap between cards */
.grid {
  gap: var(--pico-grid-column-gap, 1.5rem);
}

/* Testimonial figures — more space between quotes */
section figure {
  margin-bottom: 1rem;
}

/* Ordered list steps — more breathing room */
section ol li {
  margin-bottom: 1.5rem;
}

/* Footer — less padding, visual separator */
body > footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

/* How-it-works heading — centered but full width */
#how h2 {
  text-align: center;
}

/* Security and how-it-works — constrain prose width, centered */
#security dl,
#how ol {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Hide navbar CTA on mobile */
.landing-nav-cta {
  display: none;
}

@media (min-width: 768px) {
  .landing-nav-cta {
    display: flex;
  }
}

/* Header logo + wordmark */
header nav li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.landing-logo {
  height: 40px;
}

.landing-logo-text {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #38382e;
}

/* Footer logo */
.landing-footer-logo {
  height: 32px;
}

@media (min-width: 768px) {
  .landing-logo {
    height: 48px;
  }
  .landing-logo-text {
    font-size: 1.5rem;
  }
  .landing-footer-logo {
    height: 36px;
  }
}

/* Footer nav — stack on mobile */
body > footer nav {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

body > footer nav ul {
  justify-content: center;
}

@media (min-width: 768px) {
  body > footer nav {
    flex-direction: row;
  }
}

/* Definition list grid for security section — Pico doesn't style <dl> */
#security dl {
  display: grid;
  gap: var(--pico-spacing);
}
#security dt {
  font-weight: 600;
  margin-bottom: 0;
}
#security dd {
  margin-left: 0;
  margin-bottom: var(--pico-spacing);
}