/* Base Styles */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg-subtle);
  overflow-x: hidden;
}

/* Prevent horizontal overflow globally */
* {
  max-width: 100%;
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  /* Ensures consistent alignment for all content */
  box-sizing: border-box;
}

/* Typography - Stripe-style refined scale */
/* Display Headings (H1) */
h1 {
  font-size: var(--font-size-display);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-md);
}

/* Section Headings (H2) */
h2 {
  font-size: var(--font-size-section);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-sm);
}

/* Subsection Headings (H3) */
h3 {
  font-size: 28px;
  font-weight: 500;
  line-height: var(--line-height-normal);
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}

/* Body Text */
p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: var(--space-sm);
}

.text-muted {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.75);
  line-height: var(--line-height-relaxed);
}

.text-light {
  color: rgba(0, 0, 0, 0.55);
  font-size: var(--font-size-body);
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-display-mobile);
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  
  h2 {
    font-size: var(--font-size-section-mobile);
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  
  h3 {
    font-size: 24px;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  
  p {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* Section Base - Consistent spacing */
section {
  padding: var(--section-padding-desktop) 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

section.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  /* Tighten section spacing by ~20% for mobile */
  section {
    padding-top: calc(var(--section-padding-mobile) * 0.8);
    padding-bottom: calc(var(--section-padding-mobile) * 0.8);
  }
  
  /* Consistent container padding on mobile */
  .container,
  .nav__inner,
  .hero__inner,
  section .section__inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* Safe area support (iOS notch) */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .nav,
    section,
    .footer {
      padding-left: max(var(--space-md), env(safe-area-inset-left));
      padding-right: max(var(--space-md), env(safe-area-inset-right));
    }
  }
}

/* Links */
a {
  color: rgba(0, 0, 0, 0.5);
  transition: color var(--transition-base);
}

a:hover {
  color: rgba(0, 0, 0, 0.8);
}

/* Global reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}