/* R4B Parcel — Base / reset / typography */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;   /* keep anchored sections clear of the sticky header */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

img, svg, video { max-width: 100%; height: auto; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--primary-dark); }

/* Visible focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Layout primitives */
.page-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* App pages (dashboards, login, register) get padded, centred content.
   The homepage opts into a full-width main via $page_layout = 'full'. */
.site-main { padding-block: 2.5rem; }

.section { padding-block: clamp(64px, 9vw, 104px); position: relative; }
.section-alt {
  background: var(--surface-soft);
  border-block: 1px solid var(--border);
}

.text-primary { color: var(--primary) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Section heading block */
.section-head { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.section-title {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 .75rem;
}
.section-lead {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin: 0;
}

/* Checked feature list */
.check-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: .6rem;
}
.check-list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--text); }
.check-list i { color: var(--primary); font-size: 1.05rem; margin-top: .2rem; }