/*!
 * BetterYou Co — Base
 * -----------------------------------------------------------------------
 * Resets, base element styling and typography. Loads after tokens.css
 * and Bootstrap's own CSS, so it can lean on Bootstrap's grid/utility
 * classes while overriding its visual defaults with our tokens.
 * -----------------------------------------------------------------------
 */

html {
  scroll-behavior: smooth;
  overflow-x: clip; /* AOS fade-left/right start off-screen; body's overflow-x alone doesn't stop the root from scrolling sideways */
}

body {
  font-family: var(--by-font-family);
  background: var(--by-bg);
  color: var(--by-body);
  font-size: var(--by-fs-body);
  line-height: var(--by-lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--by-font-family);
  color: var(--by-heading);
  font-weight: var(--by-fw-bold);
  line-height: var(--by-lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: var(--by-fs-h1); }
h2 { font-size: var(--by-fs-h2); }
h3 { font-size: var(--by-fs-h3); }
h4 { font-size: var(--by-fs-h4); }

p { margin: 0; }

a {
  color: var(--by-primary);
  text-decoration: none;
  transition: color var(--by-duration-fast) var(--by-ease);
}
a:hover { color: var(--by-primary-dark); }

::selection {
  background: var(--by-primary-tint);
  color: var(--by-primary-dark);
}

/* Focus states — visible, brand-colored, never suppressed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.by-btn:focus-visible,
.by-card--selectable:focus-visible {
  outline: 2px solid var(--by-primary);
  outline-offset: 2px;
}

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

.by-container {
  width: 100%;
  max-width: var(--by-container-max);
  margin-inline: auto;
  padding-inline: var(--by-space-6);
}
@media (max-width: 767.98px) {
  .by-container { padding-inline: var(--by-space-4); }
  /* Bootstrap's g-5 gutter (3rem) makes the row's negative margin (-24px) exceed this 16px container padding, causing sideways scroll on phones */
  .by-container .row { --bs-gutter-x: 1.5rem; }
}

.by-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--by-space-2);
  font-size: var(--by-fs-eyebrow);
  font-weight: var(--by-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--by-support-terracotta);
}

.by-text-muted { color: var(--by-body-muted); }
.by-text-body { color: var(--by-body); }
.by-text-heading { color: var(--by-heading); }
.by-text-primary { color: var(--by-primary); }

/* ---------------------------------------------------------------
 * Decorative blob background — soft, organic accent shapes used
 * behind hero/header content. Purely decorative: aria-hidden in
 * markup, never carries content.
 * --------------------------------------------------------------- */
.by-blob {
  position: absolute;
  border-radius: 48% 52% 55% 45% / 45% 48% 52% 55%;
  filter: blur(0px);
  pointer-events: none;
  z-index: 0;
}
.by-blob--peach { background: var(--by-blob-peach); }
.by-blob--pink { background: var(--by-blob-pink); border-radius: 52% 48% 45% 55% / 55% 45% 52% 48%; }

.by-section {
  position: relative;
  padding-block: var(--by-space-10);
}
@media (max-width: 767.98px) {
  .by-section { padding-block: var(--by-space-8); }
}