:root {
  --color-primary: #002F22;
  --color-secondary: #1C6D46;
  --color-accent: #F9B341;
  --color-bg: #FFFFFF;
  --color-text-body: #6B6B6B;
  --color-white: #FFFFFF;

  --font-display: 'Lexend', 'Inter', sans-serif;
  --font-body: 'Lexend', 'Inter', sans-serif;

  --radius-button: 10px;
  --radius-pill: 999px;
  --radius-image: 24px;

  --content-max: 1440px;

  /* Type scale shared by every section, taken from the hero: one
     subheader size and one body size (smaller on phones). */
  --fs-sub: 18px;
  --fs-body: 18px;
}

@media (max-width: 720px) {
  :root {
    --fs-sub: 14px;
    --fs-body: 14px;
  }
}

* {
  box-sizing: border-box;
}

/* NOTE: scroll-behavior:smooth intentionally removed here -- it also
   made the browser SMOOTH-SCROLL to a URL fragment on page load (e.g.
   clicking "Home" from another page to index.html#home loads the page,
   then visibly animates scrolling down to it), which reads as the page
   jumping right after it renders. Same-page anchor clicks still get a
   smooth scroll, just done in JS (see script.js) so it only fires for
   in-page navigation, never for a fresh page load. */

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--color-bg);
  color: var(--color-text-body);
}

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 64px;
}

/* ---------- NAV (lifted from dental sample) ---------- */

.accent-bar {
  height: 4px;
  width: 100%;
  background: var(--color-primary);
}

.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0, 47, 34, 0.1);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  transform: translateY(-100%);
  animation: header-drop-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Sections that are anchor-jump targets (in-page nav clicks, or a
   cross-page link with a #fragment) need scroll-margin-top. Without it,
   the browser aligns the target's top edge to the very top of the
   viewport -- exactly where .site-header sits (it's position:sticky) --
   so the header ends up pinned on top of the section, covering it, and
   the landing looks "stuck" instead of a normal clean view of that
   section. 88px matches the header's rendered height (accent-bar +
   nav-row). */
#home,
#reviews,
#the-problem,
#what-you-get,
#services,
#how-it-works,
#faq,
#about,
#contact,
#whats-included,
#combo,
#whats-inside,
#how-to-order,
#supports,
#know-before-you-order,
#founder {
  scroll-margin-top: 88px;
}

@keyframes header-drop-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration-color: var(--color-accent);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  line-height: 40px;
}

.logo-img {
  display: block;
  height: 44px;
  width: auto;
}

.nav-desktop {
  display: none;
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-primary);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  border-bottom-color: var(--color-primary);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-caret {
  width: 11px;
  height: 11px;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown-toggle:focus-visible .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 18px;
  background: var(--color-white);
  border-radius: 14px;
  padding: 10px;
  min-width: 240px;
  box-shadow: 4px 4px 0 var(--color-secondary);
  list-style: none;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-toggle:focus-visible + .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown-menu li + li {
  margin-top: 2px;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: rgba(0, 47, 34, 0.07);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hamburger {
  width: 28px;
  height: 20px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 9px;
}

.hamburger span:nth-child(3) {
  top: 18px;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.mobile-drawer {
  max-height: 0;
  overflow: hidden;
  background: var(--color-white);
  transition: max-height 0.3s ease;
}

.mobile-drawer.open {
  max-height: 480px;
}

.nav-list-mobile {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list-mobile li a {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-primary);
  text-decoration: none;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(81, 100, 115, 0.15);
}

.drawer-cta {
  display: block;
  width: calc(100% - 40px);
  margin: 20px;
  text-align: center;
}

@media (min-width: 1024px) {
  .nav-row {
    min-height: 84px;
  }

  .nav-desktop {
    display: block;
  }

  .nav-actions .hamburger {
    display: none;
  }

  .mobile-drawer {
    display: none;
  }
}

/* ---------- HERO ---------- */

.hero {
  position: relative;
  background: #FFFFFF;
  color: var(--color-primary);
  overflow: hidden;
  padding-bottom: 32px;
}

.hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 64px;
  text-align: center;
}

.hero-inner--top {
  padding-top: 64px;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.15;
  max-width: 940px;
  margin: 0 auto 24px;
}

.hero-headline-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.3;
  color: var(--color-text-body);
  margin: 0 auto 32px;
}

.hero-headline-sub--tight {
  margin: 0 auto 32px;
  max-width: 860px;
}

.hero-product {
  max-width: 820px;
  margin: 0 auto 32px;
  padding: 0 24px;
}

.hero-product img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-answer {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  max-width: 760px;
  margin: 0 auto 28px;
}

.hero-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--color-secondary);
  margin: 0 auto 28px;
}

.hero-highlight {
  display: inline-block;
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-accent);
  padding: 1px 8px;
  border-radius: var(--radius-button);
}

/* Trust row (insurance / guarantee / experience) replaces the old plain
   money-back line. Sits low enough in the hero that the background
   gradient has already faded to a pale tone by that point, so the dark
   palette color reads clearly here (unlike higher-up hero text, which
   stays white/light). */
.hero-trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-primary);
}

.hero-trust-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 18px;
}

.hero-trust-row li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}

.hero-trust-row li:not(:first-child) {
  border-left: 1px solid rgba(0, 47, 34, 0.25);
}

.hero-subheadline--tight {
  margin: 0 auto 8px;
}

.hero-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16.5px;
  padding: 15.4px 30.8px;
  border-radius: var(--radius-button);
  text-decoration: none;
  display: inline-block;
  border: 1px solid transparent;
}

.btn-solid {
  background: var(--color-accent);
  color: var(--color-primary);
}

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 720px) {
  .hero-headline {
    font-size: 36px;
  }

  /* Mobile hero: compact enough that the order button still lands on the
     first screen, with room to breathe so it reads as a sales page. */
  .hero .hero-inner--top {
    padding-top: 32px;
  }

  .hero .hero-headline {
    font-size: 29px;
    margin-bottom: 16px;
  }

  .hero .hero-headline-sub {
    font-size: var(--fs-sub);
    line-height: 1.45;
    margin-bottom: 22px;
  }

  .hero-product {
    padding: 0 12px;
    margin-bottom: 22px;
  }

  .hero .hero-answer {
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 22px;
  }

  .hero .hero-price {
    font-size: 13.5px;
    margin-bottom: 22px;
  }

  .logo-img {
    height: 36px;
  }

  .hero-headline-sub {
    font-size: 16px;
  }

  .hero-trust-row {
    flex-direction: column;
    font-size: 13px;
    gap: 4px;
  }

  .hero-trust-row li {
    padding: 2px 12px;
  }

  .hero-trust-row li:not(:first-child) {
    border-left: none;
  }

}

@media (min-width: 1024px) {
  /* Native CSS scroll-snap used to live here (html { scroll-snap-type }
     plus scroll-snap-align on .shared-focus/.faq-section), but it
     actively fights the page's own JS-driven scroll mechanics (the
     Pain -> Value Prop curtain-slide, the Value Prop panel-stepper):
     tested with a real browser, rapid/continuous scrolling could get
     the whole page permanently stuck right at the Services boundary.
     Every wheel tick nudged forward and the browser's snap logic
     immediately pulled it back, netting zero progress, with no way to
     scroll past it. Removed entirely; the sections below keep their
     full-viewport sizing/centering so they still look right when you
     land on them, they just don't forcibly grab scroll anymore. */
  .faq-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .faq-section > .container {
    width: 100%;
  }

  /* Full-viewport centering, same treatment as .faq-section above. */
  .pain-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .pain-section > .container {
    width: 100%;
  }

  .value-scroll-track {
    height: 150vh;
  }

  .value-stage {
    position: sticky;
    top: 0;
    height: 100vh;
  }

  /* Services and How It Works share one screen's worth of focus instead of
     each claiming its own full viewport. */
  .shared-focus {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .shared-focus .services-section,
  .shared-focus .how-it-works {
    padding-block: 40px;
  }
}

/* ---- Services + How It Works: reveal-on-scroll (triggered once by JS via
   IntersectionObserver, not tied to continuous scroll position).
   Uses margin-top (not transform) for the slide-in, so it never fights
   with .service-card-wrap:hover's transform: scale() flip effect. ---- */
.reveal-item {
  opacity: 0;
  margin-top: 28px;
  transition: opacity 0.5s ease, margin-top 0.5s ease;
}

.reveal-item.is-revealed {
  opacity: 1;
  margin-top: 0;
}


/* =========================================================
   BELOW-THE-FOLD SECTIONS
   Structure lifted from "dental sample", content from
   mouthspa-homepage-script.md, recolored to Friendent tokens.
   ========================================================= */

/* ---------- Reviews ---------- */

.reviews {
  padding-block: 72px;
  background: var(--color-bg);
}

.reviews-heading {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 32px;
  text-align: center;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  border: 1px solid rgba(249, 179, 65, 0.45);
  border-radius: var(--radius-image);
  padding: 28px;
  background: var(--color-white);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.review-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 600;
  font-size: 17px;
  font-family: var(--font-display);
}

.review-avatar-a { background: var(--color-primary); }
.review-avatar-b { background: var(--color-text-body); }

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-primary);
  font-family: var(--font-display);
}

.review-sub {
  font-size: 13px;
  color: var(--color-text-body);
}

.review-stars { margin-top: 18px; }

.review-stars-icons {
  color: #F2B33D;
  font-size: 18px;
  letter-spacing: 2px;
}

.review-quote {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 17px;
  color: var(--color-primary);
  font-family: var(--font-display);
}

.review-body {
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body);
}

.review-flag {
  margin-top: 62px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-body);
  opacity: 0.7;
}

/* ---------- Pain (Address the Pain) ---------- */

.pain-section {
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #F6F9F8 4%,
    #DBE8E1 9%,
    #8EB6A2 16%,
    #498A6B 30%,
    #16613F 45%,
    #0F4A32 62%,
    #06392A 82%,
    #002F22 100%
  );
  color: #FFFFFF;
  padding-block: 96px;
}

/* Individual service pages: Pain section is NOT the dark green gradient
   used on the homepage. Same layout/structure, light background instead. */
.service-pain-section {
  /* Smooth continuation, not a hard section-to-section jump: the last
     sliver of the hero's own fade bleeds through the top 20%, the middle
     stays flat white where the pain content actually lives (readable,
     never green), and the last 20% starts easing toward the exact tone
     the treatment section picks up from -- same stops, so there's no
     seam at either boundary. */
  background: linear-gradient(180deg,
    #EDF3F0 0%,
    #FFFFFF 20%,
    #FFFFFF 80%,
    #F6F9F8 90%,
    #EDF3F0 100%
  );
  color: var(--color-text-body);
}

.service-pain-section .pain-eyebrow {
  color: var(--color-secondary);
}

.service-pain-section .pain-headline {
  color: var(--color-primary);
}

.service-pain-section .pain-body p {
  color: var(--color-text-body);
}

.service-pain-section .bridge-line {
  color: var(--color-primary);
}

.service-pain-section .self-talk {
  color: var(--color-primary);
}

.service-pain-section .reveal-line {
  color: var(--color-primary);
}

.service-pain-section .pain-items-card {
  border: 1.5px solid var(--color-primary);
}

/* Font hierarchy for this section, collapsed to 3 tiers: the headline
   (34px, unchanged), one size shared by every short transitional line
   (self-talk / reveal-line / bridge-line), and one size shared by every
   block of running text (the checklist items and the escalation
   paragraph). Desktop version of the same collapse already applied on
   mobile below. */
.service-pain-section .self-talk,
.service-pain-section .reveal-line,
.service-pain-section .bridge-line {
  font-size: 20px;
}

.service-pain-section .pain-item p,
.service-pain-section .pain-body p {
  font-size: 16px;
}

.pain-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 56px;
}

.pain-container {
  max-width: 780px;
  margin: 0;
  flex: 1 1 auto;
}

/* Fills the empty right-hand real estate on individual service pages with
   a proof stat, styled like every other card on the site (thick border +
   hard offset shadow) so it reads as part of the same design system. */
.pain-stat {
  flex: 0 0 auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--color-secondary);
  padding: 40px 28px;
}

.pain-stat-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.pain-stat-number {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 112px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  -webkit-text-stroke: 2px var(--color-primary);
  text-stroke: 2px var(--color-primary);
}

.pain-stat-caption {
  margin: 8px 0 0;
  max-width: 220px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-body);
}

@media (max-width: 900px) {
  .pain-layout {
    flex-direction: column;
    gap: 40px;
  }

  .pain-stat {
    width: 100%;
    max-width: 320px;
  }

  .pain-stat-number {
    font-size: 88px;
  }
}

.pain-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 20px;
}

.pain-headline {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.25;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
}

/* Homepage pain section: solid brand green (the template's gradient starts
   white and would leave a seam under the white hero). */
#the-problem {
  background: var(--color-primary);
  padding-block: 56px;
  min-height: 0;
}

#the-problem .pain-items-card {
  margin-bottom: 28px;
  padding: 24px 28px;
}

#the-problem .bridge-line {
  padding-top: 28px;
}

#the-problem .pain-item p {
  font-size: var(--fs-body);
}

#the-problem .bridge-line {
  font-size: var(--fs-sub);
}

/* Centered section; the bullets inside the card stay left-aligned. */
#the-problem .pain-container {
  margin-inline: auto;
  text-align: center;
}

#the-problem .pain-headline,
#the-problem .bridge-line {
  text-align: center;
}

#the-problem .pain-items {
  text-align: left;
}

/* Mobile: the whole section fits inside one phone screen. */
@media (max-width: 720px) {
  #the-problem {
    padding-block: 36px;
  }

  #the-problem .pain-container {
    margin-inline: 0;
    text-align: left;
  }

  #the-problem .pain-headline,
  #the-problem .bridge-line {
    text-align: left;
  }

  #the-problem .pain-headline {
    font-size: 25px;
    line-height: 1.25;
  }

  .pain-headline + .pain-items-card {
    margin-top: 22px;
  }

  #the-problem .pain-items-card {
    padding: 20px 22px;
    margin-bottom: 22px;
  }

  #the-problem .pain-items {
    gap: 14px;
  }

  #the-problem .pain-item p {
    line-height: 1.45;
  }

  #the-problem .bridge-line {
    padding-top: 20px;
  }
}

.pain-headline + .pain-items-card {
  margin-top: 32px;
}

.self-talk {
  border-left: 2px solid var(--color-primary);
  padding-left: 20px;
  margin-block: 40px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: #FFFFFF;
}

.reveal-line {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0 0 32px;
}

.pain-items-card {
  background: var(--color-white);
  border-radius: var(--radius-image);
  padding: 32px;
  margin: 0 0 48px;
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.pain-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.pain-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pain-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.pain-item p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0;
}

/* Used on individual service pages: plain paragraph body inside the
   pain-section for pages that don't use the itemized checklist card
   (e.g. Family & General's escalation copy). Same light-on-dark
   treatment as .self-talk / .reveal-line above. */
.pain-body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 20px;
}

.pain-body p:last-child {
  margin-bottom: 32px;
}

.bridge-line {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
}

/* Desktop hero: sized from the viewport height so the whole hero (headline
   through trust points) lands on the first screen on laptops and monitors. */
@media (min-width: 721px) {
  .hero .hero-inner--top {
    padding-top: clamp(14px, 3vh, 36px);
  }

  .hero .hero-headline {
    font-size: clamp(30px, 5vh, 52px);
    max-width: 1100px;
    margin-bottom: clamp(8px, 1.6vh, 16px);
  }

  .hero .hero-headline-sub {
    font-size: var(--fs-sub);
    max-width: 900px;
    margin-bottom: clamp(10px, 2vh, 20px);
  }

  .hero .hero-product {
    max-width: none;
    margin-bottom: clamp(8px, 1.8vh, 18px);
  }

  .hero .hero-product img {
    width: auto;
    max-width: 100%;
    height: clamp(170px, 40vh, 440px);
    margin-inline: auto;
  }

  .hero .hero-answer {
    font-size: var(--fs-body);
    margin-bottom: clamp(10px, 2vh, 20px);
  }

  .hero .hero-cta-row {
    margin-bottom: clamp(8px, 1.4vh, 12px);
  }
}

/* ---------- Combo + price ---------- */

.combo-section {
  background: #FFFFFF;
  padding-block: 56px 64px;
}

.combo-card {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 32px 40px;
  text-align: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.combo-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 24px;
}

.combo-img {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
  margin: 0 auto 20px;
}

.combo-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  color: var(--color-secondary);
  margin: 0 0 24px;
}

.combo-price {
  margin-bottom: 12px;
}

.combo-save {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
}

.combo-was {
  margin-right: 12px;
  font-size: 0.5em;
  font-weight: 400;
  color: var(--color-text-body);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .combo-section {
    padding-block: 40px 48px;
  }

  .combo-card {
    padding: 24px 16px 28px;
    text-align: left;
  }

  .combo-card .btn {
    display: inline-block;
  }

  .combo-title {
    font-size: 26px;
    margin-bottom: 16px;
  }

  .combo-img {
    margin: 0 0 12px;
  }

  .combo-price {
    font-size: 40px;
    margin-bottom: 10px;
  }

  .combo-save {
    margin-bottom: 6px;
  }

  .combo-perk {
    margin-bottom: 18px;
  }
}

/* ---------- What is in the combo: one card per product ---------- */

.products-section {
  background: #FFFFFF;
  padding-block: 8px 72px;
}

.products-intro {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: left;
}

.products-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.products-lede {
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--color-text-body);
  margin: 0;
}

.products-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}

/* Standard container style (border + hard offset shadow). The card is solid
   brand green; the media area on top fades from white into it. */
.product-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

/* Image on the left, text on the right; the media area fades sideways from
   white into the green the text sits on. */
.product-media {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding: 12px 0 12px 16px;
  background: linear-gradient(90deg,
    #FFFFFF 0%,
    #FFFFFF 45%,
    rgba(255, 255, 255, 0) 100%
  );
}

.product-media img {
  display: block;
  width: 100%;
  height: clamp(150px, 24svh, 220px);
  object-fit: contain;
  object-position: left center;
}

.product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: rgba(0, 47, 34, 0.6);
  border: 2px dashed rgba(0, 47, 34, 0.3);
  border-radius: 16px;
}

.product-info {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px 14px 4px;
  color: #FFFFFF;
}

/* What the product does: sits under both image and text on mobile, behind
   a divider, still inside the card. */
.product-about {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 16px;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sub);
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0 0 6px;
}

.product-size,
.product-dose,
.product-lasts {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 4px;
}

.product-lasts {
  color: var(--color-accent);
  margin-bottom: 0;
}

/* Dose detail always sits fully on its own line, never split mid-phrase. */
.product-dose-note {
  display: block;
  white-space: nowrap;
}

.product-price {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin: 4px 0 0;
}

/* Price breakdown under the product cards. */
.price-block {
  max-width: 720px;
  margin: 40px auto 0;
}

.price-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 10px;
}

.price-answer {
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--color-text-body);
  margin: 0 0 20px;
}

.price-summary {
  margin: 0;
  padding: 6px 20px;
  overflow: hidden;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(0, 47, 34, 0.15);
}

.price-row:last-child {
  border-bottom: 0;
}

.price-row dt,
.price-row dd {
  margin: 0;
}

.price-row dd {
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.price-row--combo dd {
  font-weight: 700;
  color: var(--color-secondary);
}

.price-row--save {
  margin: 0 -20px;
  padding-inline: 20px;
  background: var(--color-accent);
  border-bottom: 0;
}

.price-row--save dt,
.price-row--save dd {
  font-weight: 700;
}

.products-cta {
  max-width: 1120px;
  margin: 32px auto 0;
  text-align: left;
}

/* Desktop: image on one side, text on the other, alternating left/right.
   The fade runs sideways (white into green) so the text stays on solid green. */
@media (min-width: 721px) {
  .products-intro {
    text-align: center;
    margin-bottom: 40px;
  }

  .products-cta {
    text-align: center;
    margin-top: 40px;
  }

  /* Desktop: text on the left, price table on the right, spanning the same
     full width as the product cards above. */
  .price-block {
    max-width: 1120px;
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title  table"
      "answer table"
      "perk   table";
    grid-template-rows: auto auto auto;
    column-gap: 56px;
    align-content: center;
  }

  .price-title {
    grid-area: title;
    align-self: end;
    font-size: 30px;
  }

  .price-answer {
    grid-area: answer;
    margin-bottom: 0;
  }

  .price-summary {
    grid-area: table;
    align-self: center;
  }

  .price-block .perk--center {
    grid-area: perk;
    justify-content: flex-start;
    text-align: left;
    align-self: start;
    margin-top: 24px;
  }

  /* Image spans the full card height on one side; the text column on the
     other holds the details, a divider, then what the product does. */
  .product-card {
    grid-template-columns: 46% 1fr;
    grid-template-rows: auto auto;
    align-content: center;
  }

  .product-media {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 28px 56px 28px 28px;
    background: linear-gradient(90deg,
      #FFFFFF 0%,
      #FFFFFF 45%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .products-grid {
    gap: 28px;
  }

  .product-media img {
    object-position: center;
  }

  .product-media img,
  .product-placeholder {
    width: 100%;
    min-height: 0;
    height: clamp(180px, calc(50vh - 135px), 300px);
  }

  .product-info {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    padding: 28px 40px 16px 8px;
  }

  .product-about {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0 40px 0 8px;
    padding: 16px 0 28px;
  }

  .product-card:nth-child(even) {
    grid-template-columns: 1fr 46%;
  }

  .product-card:nth-child(even) .product-media {
    grid-column: 2;
    padding: 28px 28px 28px 56px;
    background: linear-gradient(270deg,
      #FFFFFF 0%,
      #FFFFFF 45%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .product-card:nth-child(even) .product-info {
    grid-column: 1;
    padding: 28px 8px 16px 40px;
  }

  .product-card:nth-child(even) .product-about {
    grid-column: 1;
    margin: 0 8px 0 40px;
  }
}

/* ---------- What the combo is designed to support ---------- */

.support-section {
  background: var(--color-primary);
  padding-block: 48px;
}

.support-intro {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: left;
}

.support-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 12px;
}

.support-lede {
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.support-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto;
}

/* Standard container style: border + hard offset shadow. */
.support-card {
  padding: 20px 22px;
  background: var(--color-white);
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.support-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sub);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 6px;
}

.support-text {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-primary);
  margin: 0;
}

@media (min-width: 721px) {
  .support-section {
    padding-block: 64px;
  }

  .support-intro {
    text-align: center;
    margin-bottom: 40px;
  }

  .support-title {
    font-size: 34px;
  }

  .support-grid {
    flex-direction: row;
    gap: 24px;
  }

  .support-card {
    flex: 1 1 0;
    padding: 28px 26px;
  }
}

/* ---------- Founder ---------- */

.founder-section {
  background: #FFFFFF;
  padding-block: 48px;
}

.founder-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}

/* Standard container style: border + hard offset shadow. */
.founder-photo {
  overflow: hidden;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 36%;
}

.founder-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 14px;
}

.founder-body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-primary);
  margin: 0 0 18px;
}

.founder-sign {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-primary);
  margin: 0;
}

.founder-sign strong {
  font-weight: 700;
}

@media (min-width: 721px) {
  .founder-section {
    padding-block: 72px;
  }

  .founder-layout {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .founder-photo {
    flex: 0 0 38%;
  }

  .founder-photo img {
    aspect-ratio: 4 / 5;
    object-position: center 30%;
  }

  .founder-copy {
    flex: 1 1 auto;
  }

  .founder-title {
    font-size: 34px;
    margin-bottom: 20px;
  }
}

/* Free pharmacist access, repeated where it helps the buying decision. */
.perk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-primary);
}

.perk svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-secondary);
}

.perk--founder {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 47, 34, 0.18);
}

.combo-perk {
  margin: 0 0 24px;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-primary);
}

@media (min-width: 721px) {
  .perk--center {
    justify-content: center;
    text-align: center;
  }

  .combo-perk {
    margin: 0 0 24px;
  }
}

/* ---------- How to order ---------- */

/* Soft green-tinted band between the white product breakdown and the dark
   green "designed to support" section; the steps are green cards, like the
   product cards. */
.order-section {
  background: #EDF3F0;
  padding-block: 48px;
}

.order-intro {
  max-width: 760px;
  margin: 0 auto 24px;
  text-align: left;
}

.order-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.order-lede {
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--color-text-body);
  margin: 0;
}

/* Mobile: one green card, four rows. */
.order-steps {
  max-width: 1040px;
  margin: 0 auto;
  padding: 4px 18px;
  list-style: none;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.order-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.order-step:last-child {
  border-bottom: 0;
}

.order-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.order-text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

.order-text strong {
  font-weight: 700;
  color: #FFFFFF;
}

.order-cta {
  max-width: 1040px;
  margin: 24px auto 0;
}

@media (min-width: 721px) {
  .order-section {
    padding-block: 64px;
  }

  .order-intro {
    text-align: center;
    margin-bottom: 40px;
  }

  .order-title {
    font-size: 34px;
  }

  /* Desktop: four separate cards in a row. */
  .order-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .order-step {
    flex-direction: column;
    gap: 16px;
    padding: 24px 22px 28px;
    background: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-image);
    box-shadow: 4px 4px 0 var(--color-secondary);
  }

  .order-step:last-child {
    border-bottom: 1.5px solid var(--color-primary);
  }

  .order-cta {
    text-align: center;
    margin-top: 36px;
  }
}

/* ---------- Value Proposition (What You Get) ---------- */

.value-section {
  position: relative;
  padding-block: 96px;
  background: var(--color-bg);
}

.value-scroll-track {
  position: relative;
  z-index: 1;
}

.value-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.value-stage > .container {
  width: 100%;
}

.value-intro {
  text-align: left;
  max-width: 720px;
  margin: 0 0 56px;
}

.value-heading {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.value-cta-row {
  text-align: left;
  margin-top: 56px;
}

.value-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.value-visual {
  max-width: 420px;
}

.value-main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(0, 47, 34, 0.05);
  border: 1px solid rgba(0, 47, 34, 0.12);
  border-radius: var(--radius-image);
  overflow: hidden;
}

.value-panel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-body);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.value-panel-image.is-active {
  opacity: 1;
  pointer-events: auto;
}

.value-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.value-thumb {
  aspect-ratio: 1 / 1;
  border: 1.5px solid rgba(0, 47, 34, 0.15);
  border-radius: 8px;
  background: rgba(0, 47, 34, 0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.value-thumb:hover {
  border-color: var(--color-primary);
}

.value-thumb.is-current {
  border-color: var(--color-primary);
  background: rgba(0, 47, 34, 0.08);
}

.value-panels {
  position: relative;
  min-height: 260px;
}

.value-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.value-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.value-panel.is-above {
  transform: translateY(-40px);
}

.value-panel .eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}

.value-panel h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
  margin: 0 0 16px;
}

.value-panel p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0;
}

/* ---------- Services (inspo: card grid) ---------- */

.services-section {
  padding-block: 96px;
  background: var(--color-bg);
}

.services-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: center;
}

.services-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-body);
  margin: 0 0 16px;
}

.services-heading {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-primary);
  margin: 0 0 24px;
}

.services-intro-block .btn {
  margin-top: 8px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 24px;
}

.service-card-wrap {
  position: relative;
  perspective: 1400px;
  transition: transform 0.35s ease;
  transform-origin: center;
}

.service-card-wrap:hover {
  transform: scale(1.18);
  z-index: 5;
}

.service-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.service-card-wrap:hover .service-card-inner {
  transform: rotateY(180deg);
}

.service-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-image);
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  color: var(--color-white);
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Same hard-edged offset shadow used by the How It Works cards, for a
     consistent card style across the site. */
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.service-card-front {
  justify-content: space-between;
}

.service-card-back {
  transform: rotateY(180deg);
  justify-content: space-between;
  gap: 10px;
}

.service-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-check svg {
  width: 13px;
  height: 13px;
  stroke: var(--color-white);
}

.service-card-front h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
}

.service-card-back ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-white);
  opacity: 0.9;
  overflow-y: auto;
}

.service-card-back .btn {
  align-self: flex-start;
  padding: 8px 16px;
  font-size: 12px;
}

/* ---------- How It Works (inspo: step board) ---------- */

.how-it-works {
  padding-block: 96px;
  background: #FBF9F7;
}

.how-heading {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: left;
  margin: 0 0 56px;
}

.how-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.how-column-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-body);
  text-align: center;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 47, 34, 0.15);
}

.how-card {
  position: relative;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 4px 4px 0 var(--color-secondary);
  /* .how-board's 3 column-wrapper divs stretch to equal height by
     default grid behavior, but the card itself only sized to its own
     text -- so when one step's copy is longer than the other two
     (e.g. a page-specific step 1), that card's border ends up shorter
     than its siblings and the row looks unaligned/unfinished. Filling
     the stretched wrapper fixes it. */
  height: 100%;
  box-sizing: border-box;
}

.how-card-number {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
}

.how-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-primary);
  margin: 0 0 8px;
}

.how-card p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-body);
  margin: 0;
}

/* ---------- FAQ ---------- */

.faq-section {
  padding-block: 96px;
  background: var(--color-bg);
}

.faq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 64px;
}

.faq-main {
  border: 1.5px solid rgba(0, 47, 34, 0.15);
  border-radius: 16px;
  padding: 40px;
  background: #FBF9F7;
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.faq-sidebar { position: sticky; top: 100px; }

.faq-sidebar-card {
  border: 1.5px solid rgba(0, 47, 34, 0.15);
  border-radius: 16px;
  padding: 32px 28px;
  background: #FBF9F7;
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.faq-sidebar-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.faq-sidebar-card p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0 0 22px;
}

.faq-sidebar-card--nudge {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.faq-sidebar-card--nudge h3,
.faq-sidebar-card--nudge p {
  color: var(--color-white);
}

.faq-sidebar-card--nudge p {
  opacity: 0.85;
}

.faq-sidebar-nudge-line {
  opacity: 1 !important;
  margin: 0 0 22px !important;
}

.faq-heading {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 40px;
}

.faq-list { border-top: 1px solid rgba(0, 47, 34, 0.15); }

.faq-item { border-bottom: 1px solid rgba(0, 47, 34, 0.15); }

.faq-item.faq-extra { display: none; }

.faq-list.expanded .faq-item.faq-extra { display: block; }

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: none;
  border: none;
  text-align: left;
  padding-block: 22px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-primary);
  transition: transform 0.2s ease;
}

.faq-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-icon::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
}

.faq-item.open .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-item.open .faq-icon::before {
  transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-item.open .faq-answer { max-height: 400px; }

.faq-answer p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body);
  margin: 0;
  padding-bottom: 22px;
  padding-right: 24px;
}

.faq-toggle {
  display: block;
  margin: 28px 0 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 4px;
  border-bottom: 1.5px solid var(--color-primary);
}

/* Per-treatment toggle sits right under its own short list, not the long
   homepage one, so it does not need nearly as much breathing room above it. */
.faq-treatment-toggle {
  margin-top: 4px;
}

/* Individual service pages: FAQ section has no sidebar nudge card (the
   page already has its own full-width Nudge section), so .faq-main runs
   solo, centered and width-capped instead of living in the two-column
   .faq-columns grid. */
.faq-main--solo {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* Groups every treatment's FAQs under its own label inside the
   consolidated list. Reuses .faq-item so the existing show/hide-on-toggle
   CSS and JS (targeting .faq-item.faq-extra) apply to headers too. */
.faq-group-header {
  border-bottom: none;
  padding-top: 32px;
}

.faq-group-header:first-child {
  padding-top: 0;
}

.faq-group-title {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* Each treatment gets its own boxed FAQ card (name + its own 2 preview
   questions + its own "show all" toggle), instead of one long flat list. */
.faq-treatment-block {
  border: 1.5px solid rgba(0, 47, 34, 0.15);
  border-radius: 16px;
  padding: 28px 32px;
  background: #FBF9F7;
  margin-bottom: 24px;
}

.faq-treatment-block:last-child {
  margin-bottom: 0;
}

.faq-treatment-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 4px;
}

.faq-treatment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

.faq-treatment-grid .faq-treatment-block {
  margin-bottom: 0;
}

.faq-treatment-block .faq-list {
  border-top: none;
}

.faq-treatment-block .faq-item:first-child {
  border-top: 1px solid rgba(0, 47, 34, 0.15);
}

/* Hero scroll-down cue, replacing the old secondary "See What's
   Included" button. */
.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 40px auto 0;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

.hero-scroll-cue-line {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.4);
}

.hero-scroll-cue svg {
  width: 20px;
  height: 20px;
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Nudge ---------- */

.nudge-section {
  padding-block: 96px;
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
}

.nudge-eyebrow {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 20px;
}

.nudge-section p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto 12px;
  opacity: 0.9;
}

.nudge-section strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 24px 0 32px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-primary);
  color: #FFFFFF;
}

.footer-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand {
  padding: 40px 32px 40px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
}

.footer-logo-img {
  display: block;
  align-self: flex-start;
  flex: none;
  width: auto;
  height: 64px;
  /* Logomark is dark grey on transparent; force it white for the green footer. */
  filter: brightness(0) invert(1);
}

.footer-social-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 14px;
}

.footer-social { display: flex; flex-direction: column; }

.footer-social a {
  font-family: var(--font-body);
  font-size: 15px;
  color: #FFFFFF;
  padding-block: 6px;
  text-decoration: none;
}

.footer-social a:hover { color: var(--color-white); }

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 40px 0 40px 40px;
  gap: 32px;
}

.footer-col { display: flex; flex-direction: column; }

.footer-col-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}

.footer-col a {
  font-family: var(--font-body);
  font-size: 15px;
  color: #FFFFFF;
  padding-block: 6px;
  text-decoration: none;
}

.footer-col a:hover { color: var(--color-white); }

.footer-col-cta { align-items: flex-start; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-bottom a:hover { color: #FFFFFF; }

/* =========================================================
   SERVICES PAGE (services.html)
   Deliberately lighter and simpler than the homepage hero: plain
   brand-white background instead of the dark green gradient, no photo
   collage or animation, just an eyebrow / headline / subhead / one CTA.
   The card list below reuses the site's existing checkmark icon and
   hard-shadow card language (same as How It Works / reviews / pain
   checklist) so it still reads as the same site, just a calmer page.
   ========================================================= */

.services-hero {
  /* Same fade-gradient treatment as the homepage hero, and the content is
     centered the same way too -- this page isn't a new first impression,
     it reinforces the same promise (fully numb, we stop at discomfort). */
  background: linear-gradient(180deg,
    #002F22 0%,
    #002F22 2%,
    #002F22 4%,
    #002F22 6%,
    #002F22 8%,
    #002F22 10%,
    #002F22 12%,
    #013023 14%,
    #013023 16%,
    #013023 18%,
    #023124 20%,
    #033124 22%,
    #043225 24%,
    #043326 26%,
    #063427 28%,
    #073528 30%,
    #083629 32%,
    #0A372B 34%,
    #0C392C 36%,
    #0E3A2E 38%,
    #103C30 40%,
    #133E32 42%,
    #164135 44%,
    #194338 46%,
    #1C463A 48%,
    #20493E 50%,
    #244C41 52%,
    #285045 54%,
    #2D5449 56%,
    #32584D 58%,
    #375C52 60%,
    #3D6157 62%,
    #43665C 64%,
    #496B62 66%,
    #507067 68%,
    #57766E 70%,
    #5F7D74 72%,
    #67837C 74%,
    #708A83 76%,
    #79928B 78%,
    #839993 80%,
    #8DA29C 82%,
    #97AAA5 84%,
    #A2B3AF 86%,
    #AEBDB9 88%,
    #BAC7C3 90%,
    #C7D1CE 92%,
    #D4DCDA 94%,
    #E2E7E6 96%,
    #F0F3F2 98%,
    #FFFFFF 100%
  );
  color: var(--color-white);
  padding-block: 150px 110px;
  text-align: center;
}

.services-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 20px;
}

.services-hero-headline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0 auto 24px;
  /* Generous on purpose: the two-line split (forced break after "in,")
     was breaking into 3 lines on reload because the fallback system
     font (shown briefly before Lexend finishes loading, and again for
     an instant when the bold weight file arrives after the regular
     weight) is measurably wider than Lexend at 600 weight -- a snug
     max-width that only fit Lexend's own metrics couldn't survive that
     swap. This width plus the nowrap safeguard below fixes it for good,
     regardless of which font is rendering at a given instant.
     Font-size matches the homepage hero headline (72px) so every hero
     across the site reads at the same scale. */
  max-width: 1300px;
}

.services-hero-headline-line2 {
  white-space: nowrap;
}

.services-hero-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin: 0 auto 32px;
}

.service-detail-section {
  /* Fixed pixel stops (not percentages) so the gradient always finishes
     going dark by ~220px from the top of the section, regardless of how
     tall the section ends up being overall (2 short treatments vs 5 long
     ones). The "What's Included" heading always lands inside the first
     ~115px (light, keeps its normal dark text) and the first treatment's
     copy always starts past ~185px (dark enough for white text) -- both
     offsets are fixed by the surrounding layout, never by content length. */
  background: linear-gradient(180deg,
    #EDF3F0 0px,
    #EDF3F0 130px,
    #8EB6A2 180px,
    #16613F 230px,
    #0F4A32 270px,
    #002F22 320px,
    #002F22 100%
  );
  padding-top: 88px;
  padding-bottom: 96px;
}

/* Text living inside the gradient needs to flip from the site's usual
   dark-on-light to light-on-dark partway down. The "What's Included"
   label sits in the still-light band up top so it keeps its normal dark
   color (no override needed); everything inside the feature rows sits
   further down where the gradient has already gone dark. */
.service-detail-section .service-feature-eyebrow {
  color: var(--color-accent);
}

.service-detail-section .service-feature-content h3 {
  color: var(--color-white);
}

.service-detail-section .service-feature-content > p {
  color: rgba(255, 255, 255, 0.85);
}

.service-detail-section .service-feature-visual {
  border: 1.5px solid var(--color-primary);
}

.service-detail-section .service-page-note {
  color: rgba(255, 255, 255, 0.75);
}

/* ================= SERVICE SHOWCASE (tabbed treatment switcher) ================= */
.service-showcase-section {
  /* Starts at the exact tone the pain section fades to, so there is no
     seam at that boundary, then settles into the same off-white used by
     the booking/how-it-works section further down the page. */
  background: linear-gradient(180deg, #EDF3F0 0%, #FBF9F7 15%, #FBF9F7 100%);
  padding-block: 96px;
}

/* One solid object: the tabs are joined rectangles that form the top
   edge of this same box, not a separate floating row above it. */
.service-showcase-box {
  border: 1.5px solid var(--color-primary);
  border-radius: 24px;
  box-shadow: 4px 4px 0 var(--color-secondary);
  overflow: hidden;
  background: var(--color-white);
}

.service-showcase-tabs {
  display: flex;
  flex-wrap: wrap;
}

.service-showcase-tab {
  flex: 1 1 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: var(--color-primary);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 20px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.service-showcase-tab:last-child {
  border-right: none;
}

.service-showcase-tab:hover:not(.is-active) {
  background: var(--color-secondary);
  color: var(--color-white);
}

.service-showcase-tab.is-active {
  background: var(--color-white);
  color: var(--color-primary);
}

.service-showcase-panel {
  display: none;
}

.service-showcase-panel.is-active {
  display: flex;
  align-items: stretch;
}

.service-showcase-media {
  flex: 0 0 42%;
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.service-showcase-media .service-feature-icon {
  width: 140px;
  height: 140px;
  color: var(--color-accent);
}

.service-showcase-right {
  flex: 1 1 auto;
  padding: 48px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.service-showcase-content {
  margin-bottom: 32px;
}

.service-showcase-content .service-feature-eyebrow {
  margin: 0 0 8px;
}

.service-showcase-content h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 16px;
}

.service-showcase-content > p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
  margin: 0 0 24px;
}

.service-showcase-faq {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1.5px solid rgba(0, 47, 34, 0.15);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom-width: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.service-showcase-faq-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 12px;
}

@media (max-width: 900px) {
  .service-showcase-tab {
    flex: 1 1 50%;
    font-size: 13px;
    padding: 14px 12px;
  }

  .service-showcase-panel.is-active {
    flex-direction: column;
  }

  .service-showcase-media {
    flex: none;
    width: 100%;
    padding: 32px;
  }

  .service-showcase-right {
    padding: 32px 24px;
  }
}

.service-detail-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.service-detail-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.service-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
}

.service-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-detail-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-white);
}

.service-detail-head h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.service-detail-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
  margin: 0 0 24px;
  max-width: 640px;
}

.service-detail-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.service-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-primary);
}

.service-detail-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-secondary);
}

.service-detail-cta {
  border-color: rgba(0, 47, 34, 0.3);
  color: var(--color-primary);
}

.service-detail-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Overview grid cards (services.html only -- .service-detail-list is not
   present on the individual service pages) get the same gradient card
   treatment as the homepage service teaser cards, for style continuity. */
.service-detail-list .service-detail-card {
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  border: none;
  /* Fixed height (2-column desktop grid only) so all 6 cards match,
     regardless of how many checklist items or how long the description
     runs; the Book This / Learn More row is pinned to the bottom so the
     extra room lands below the checklist, not stretched inside it. */
  height: 405px;
  display: flex;
  flex-direction: column;
}

.service-detail-list .service-detail-card .service-detail-cta-row {
  margin-top: auto;
}

.service-detail-list .service-detail-icon {
  background: rgba(255, 255, 255, 0.18);
}

.service-detail-list .service-detail-head h3 {
  color: var(--color-white);
}

.service-detail-list .service-detail-desc {
  color: rgba(255, 255, 255, 0.85);
}

.service-detail-list .service-detail-item {
  color: var(--color-white);
}

.service-detail-list .service-detail-item svg {
  color: var(--color-white);
}

.service-detail-list .service-detail-card .service-detail-cta {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}

.service-detail-list .service-detail-learnmore {
  color: var(--color-white);
}

.service-detail-learnmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-primary);
  text-decoration: none;
}

.service-detail-learnmore svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.service-detail-learnmore:hover svg {
  transform: translateX(3px);
}

.service-back-link {
  color: inherit;
  text-decoration: none;
}

.service-back-link:hover {
  text-decoration: underline;
}

.service-page-note {
  max-width: 640px;
  margin: 32px 0 48px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
}

/* ================= SERVICE FEATURE ROWS (individual service pages) =================
   Alternating icon-and-text blocks, one per treatment under "What's
   Included". Direction alternates left/right per row via .is-reversed
   so the list doesn't read as one long monotonous column. */
.service-feature-list {
  display: flex;
  flex-direction: column;
  gap: 96px;
  margin: 48px 0 48px;
}

.service-feature-row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.service-feature-row.is-reversed {
  flex-direction: row-reverse;
}

.service-feature-visual {
  flex: 0 0 480px;
  width: 480px;
  height: 480px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 rgba(0, 47, 34, 0.15);
}

.service-feature-icon {
  width: 168px;
  height: 168px;
  color: var(--color-accent);
}

.service-feature-icon svg {
  width: 100%;
  height: 100%;
}

.service-feature-content {
  flex: 1 1 auto;
  padding-top: 4px;
}

.service-feature-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 10px;
}

.service-feature-content h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.service-feature-content > p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
  margin: 0 0 20px;
}

.service-feature-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-feature-faq-item p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-body);
  margin: 0;
}

.service-feature-faq-item strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* Each treatment is independently bookable (they are not a sequential
   must-follow list), so each feature row gets its own CTA. */
.service-feature-cta {
  display: inline-block;
  margin-top: 4px;
}

/* ================= HOW IT WORKS + VALUE PROPOSITION (merged, individual
   service pages) =================
   How It Works runs down the left as a vertical stack; Value Proposition
   sits in its own card sharing the same row on the right. */
.how-value-section {
  padding-block: 96px;
  background: #FBF9F7;
}

.how-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.how-board--vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.how-board--vertical .how-column-label {
  text-align: left;
}

.how-value-value {
  position: sticky;
  top: 120px;
}

.service-value-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.service-value-card .service-value-heading {
  text-align: left;
  margin: 0 0 20px;
  max-width: none;
}

.service-value-card .service-value-text {
  text-align: left;
  max-width: none;
  margin: 0;
}

/* ================= SERVICE BOOKING FORM (individual service pages) ================= */
.service-booking-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.service-booking-heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 24px;
}

.service-booking-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.service-booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.service-booking-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-booking-field span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.service-booking-field input,
.service-booking-field select {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1.5px solid rgba(0, 47, 34, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

.service-booking-field input:focus,
.service-booking-field select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.service-booking-submit {
  width: 100%;
  text-align: center;
  border: none;
  margin-top: 4px;
  font-size: 16.5px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .service-booking-row {
    grid-template-columns: 1fr;
  }
}

/* ================= SERVICE BOOKING DATEPICKER (custom, blocks Sundays) ================= */
.service-datepicker {
  position: relative;
}

.service-datepicker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1.5px solid rgba(0, 47, 34, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
}

.service-datepicker-trigger:focus,
.service-datepicker-trigger.is-open {
  outline: none;
  border-color: var(--color-primary);
}

.service-datepicker-trigger-text.is-placeholder {
  color: rgba(0, 47, 34, 0.4);
}

.service-datepicker-trigger svg {
  width: 18px;
  height: 18px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.service-datepicker-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 280px;
  max-width: 90vw;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 4px 4px 0 rgba(0, 47, 34, 0.15);
}

.service-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.service-datepicker-month-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

.service-datepicker-nav {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(0, 47, 34, 0.25);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.service-datepicker-nav:hover {
  border-color: var(--color-primary);
}

.service-datepicker-weekdays,
.service-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.service-datepicker-weekdays {
  margin-bottom: 4px;
}

.service-datepicker-weekdays span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--color-secondary);
}

.service-datepicker-day {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-primary);
  cursor: pointer;
}

.service-datepicker-day:hover {
  background: rgba(0, 47, 34, 0.08);
}

.service-datepicker-day.is-selected {
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: 700;
}

.service-datepicker-day.is-disabled {
  color: rgba(0, 47, 34, 0.25);
  cursor: not-allowed;
  pointer-events: none;
}

.service-datepicker-day.is-empty {
  visibility: hidden;
  cursor: default;
  pointer-events: none;
}

.service-datepicker-note {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(0, 47, 34, 0.55);
  text-align: center;
}

.service-time-select:disabled {
  color: rgba(0, 47, 34, 0.4);
  cursor: not-allowed;
}

/* Tightened so the FAQ section and the Nudge card right below it read as
   one continuous section instead of two disconnected blocks. */
.faq-section:has(+ .service-nudge-section) {
  padding-bottom: 32px;
}

.faq-section + .service-nudge-section {
  padding-top: 0;
}

/* ================= SERVICE VALUE PROPOSITION (individual service pages) ================= */
.service-value-section {
  background: #F6F9F8;
  padding-block: 72px;
}

.service-value-heading {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  margin: 0 auto 24px;
  max-width: 700px;
}

.service-value-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-body);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.service-value-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  max-width: 940px;
  margin: 40px auto 0;
}

.service-value-pillar {
  text-align: center;
}

.service-value-pillar h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 6px;
}

.service-value-pillar p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-body);
  margin: 0;
}

/* ================= SERVICE NUDGE (individual service pages) ================= */
.service-nudge-section {
  padding-block: 72px;
  background: var(--color-bg);
}

.service-nudge-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 4px 4px 0 rgba(0, 47, 34, 0.15);
}

.service-nudge-card--wide {
  max-width: none;
  width: 100%;
}

.service-nudge-card h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0 0 16px;
}

.service-nudge-card p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 8px;
}

.service-nudge-card .service-nudge-line {
  color: var(--color-white);
  font-weight: 600;
  margin: 0 0 24px;
}

@media (max-width: 720px) {
  .service-feature-row,
  .service-feature-row.is-reversed {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .service-feature-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 340px;
    margin: 0 auto;
    flex: none;
  }

  .service-feature-icon {
    width: 130px;
    height: 130px;
  }

  .service-feature-content h3 {
    font-size: 21px;
  }

  .service-value-heading {
    font-size: 24px;
  }

  .service-value-pillars {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-nudge-card {
    padding: 36px 24px;
  }
}

.service-page-cta {
  border-top: 1.5px solid rgba(0, 47, 34, 0.12);
  padding-top: 40px;
}

.service-page-cta h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 20px;
  max-width: 480px;
}

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .services-layout { grid-template-columns: 1fr; }
  .services-grid { grid-auto-rows: 210px; }
  .value-showcase { grid-template-columns: 1fr; gap: 32px; }
  .how-board { grid-template-columns: 1fr; }
  .faq-columns { grid-template-columns: 1fr; }
  .faq-treatment-grid { grid-template-columns: 1fr; }
  .how-value-grid { grid-template-columns: 1fr; gap: 40px; }
  .how-value-value { position: static; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .footer-links { padding-left: 0; grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   MOBILE REDESIGN (phone widths)
   Placed last on purpose: several rules here (.reviews-grid,
   .services-grid, .collage-card) intentionally override the
   720px and 900px blocks above for the same properties, and
   without !important the later rule in the file wins when two
   media queries are both true at once (e.g. a 390px viewport
   matches both max-width:720px and max-width:900px).
   ========================================================= */

@media (max-width: 720px) {
  /* Full-bleed content with a slim 20px edge gutter instead of the
     desktop 64px side padding, so everything gets real room on a
     narrow screen. */
  .container {
    padding-inline: 20px;
  }

  .hero-inner {
    padding: 0 20px;
  }

  /* ---- Everything reads left-aligned on a phone, hero through footer
     -- headings, body copy, and the hero's own CTA/trust row (which use
     flexbox, not text-align, so they need justify-content set too). ---- */
  .hero-inner {
    text-align: left;
  }

  /* Buttons sized down ~40% for mobile (desktop keeps the larger
     touch-friendly size), and the hero's two CTAs forced onto one row
     now that they're small enough to fit side by side. */
  .btn {
    font-size: 12px;
    padding: 10.8px 21.6px;
  }

  /* Tighter gap between the hero sub-header and its buttons. */
  .hero-headline-sub--tight {
    margin-bottom: 14px;
  }

  .hero-cta-row {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .hero-trust-row {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    color: var(--color-primary);
  }

  .hero-headline-sub br.mobile-hide-break {
    display: none;
  }

  .pain-container {
    margin-inline: 0;
  }

  .pain-eyebrow,
  .pain-headline {
    text-align: left;
  }

  /* The pain section had 6 different font sizes in play (13/34/19/20/16/22px)
     between the eyebrow, headline, quote, reveal line, checklist text and
     bridge line -- on a phone that reads as inconsistent rather than
     intentional, so it's collapsed to a plain 3-tier system: one header
     size, one sub-header size shared by every short transitional line,
     and one body size shared by the eyebrow label and the checklist. */
  .pain-headline {
    font-size: 28px;
  }

  .self-talk,
  .reveal-line,
  .bridge-line {
    font-size: 18px;
  }

  .pain-eyebrow,
  .pain-item p {
    font-size: 16px;
  }

  .value-intro {
    margin-inline: 0;
    text-align: left;
  }

  .value-cta-row {
    text-align: left;
    margin-top: 20px;
  }

  .services-intro-block {
    text-align: left;
  }

  .how-heading {
    text-align: left;
  }

  .how-column-label {
    text-align: left;
  }

  .faq-heading {
    text-align: left;
  }

  /* .faq-main is a bordered card that (unlike every other section's
     heading) wraps the heading itself, so its own padding was pushing
     "Common questions" well to the right of every other heading's left
     edge. Pulling the card out to the viewport edge with a matching
     negative margin, then re-padding by exactly the container's own
     gutter, lines its content back up with the rest of the page. */
  .faq-main {
    margin-inline: -20px;
    padding: 32px 20px;
    border-radius: 0;
  }

  .reviews-heading {
    text-align: left;
  }

  .review-flag {
    text-align: left;
  }

  /* ---- Reviews become a swipeable carousel of perfect squares. ---- */
  .reviews-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .reviews-grid::-webkit-scrollbar {
    display: none;
  }

  .review-card {
    flex: 0 0 calc(100% - 40px);
    max-width: calc(100% - 40px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
  }

  /* ---- Services become two square cards per row. ---- */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: unset;
    gap: 14px;
  }

  .service-card-wrap {
    aspect-ratio: 1 / 1;
  }

  .service-card-wrap:hover {
    transform: none;
    z-index: auto;
  }

  /* The reveal-on-scroll effect shared with How It Works animates
     margin-top (see .reveal-item), which is harmless on a fixed-height
     desktop grid but here the services grid auto-sizes its rows
     (grid-auto-rows: unset, right above), so that animating margin was
     shrinking and growing each row's height for half a second -- a
     jittery "weird transition" as the two cards in a row settled at
     different moments. Cards just fade in in place on mobile instead. */
  .services-grid .reveal-item {
    margin-top: 0;
    transition: opacity 0.5s ease;
  }

  /* ---- Services page (services.html) ---- */
  .services-hero {
    padding-block: 88px 56px;
    text-align: left;
  }

  .services-hero-headline {
    font-size: 36px;
  }

  .services-hero-headline br.mobile-hide-break {
    display: none;
  }

  .services-hero-headline-line2 {
    white-space: normal;
  }

  .services-hero-sub {
    font-size: 15px;
  }

  .service-detail-list {
    grid-template-columns: 1fr;
  }

  .service-detail-card {
    padding: 24px;
  }

  .service-detail-list .service-detail-card {
    height: auto;
  }

  .service-detail-items {
    grid-template-columns: 1fr;
  }

  .service-detail-cta-row {
    gap: 16px;
  }

  .service-page-cta h2 {
    font-size: 21px;
  }
}

/* ---------- What to know before ordering ---------- */

.know-section {
  background: #FFFFFF;
  padding-block: 48px 8px;
}

.know-intro {
  max-width: 760px;
  margin: 0 auto 24px;
  text-align: left;
}

.know-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.know-lede {
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--color-text-body);
  margin: 0;
}

/* Standard container style: border + hard offset shadow. */
.know-card {
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px 20px;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

.know-list {
  margin: 0;
}

.know-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 47, 34, 0.15);
}

.know-row:last-child {
  border-bottom: 0;
}

.know-row dt {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
}

.know-row dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-primary);
}

@media (min-width: 721px) {
  .know-section {
    padding-block: 64px 16px;
  }

  .know-intro {
    text-align: center;
    margin-bottom: 36px;
  }

  .know-title {
    font-size: 34px;
  }

  .know-card {
    padding: 8px 36px;
  }

  .know-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    column-gap: 32px;
    align-items: baseline;
    padding: 22px 0;
  }

  .know-row dt {
    margin: 0;
  }
}

/* ---------- FAQ (pharmacy) ---------- */
/* Restyled to match the rest of the page: standard container, shared type sizes. */

#faq.faq-section {
  display: block;
  min-height: 0;
  padding-block: 8px 48px;
  background: #FFFFFF;
}

#faq .faq-columns {
  max-width: 1248px;
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 24px;
}

#faq .faq-main {
  margin-inline: 0;
  padding: 24px 20px 8px;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: 4px 4px 0 var(--color-secondary);
}

#faq .faq-heading {
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.25;
  text-align: left;
}

#faq .faq-question {
  padding: 16px 0;
  font-size: var(--fs-sub);
  line-height: 1.35;
}

#faq .faq-item.open .faq-answer {
  max-height: 700px;
}

#faq .faq-answer p {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-primary);
  padding-bottom: 18px;
}

#faq .faq-sidebar {
  position: static;
}

#faq .faq-sidebar-card {
  padding: 24px 22px 26px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-image);
}

#faq .faq-sidebar-card h3 {
  margin: 0 0 10px;
  font-size: var(--fs-sub);
  font-weight: 700;
}

#faq .faq-sidebar-card p {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  line-height: 1.5;
}

@media (min-width: 901px) {
  #faq.faq-section {
    padding-block: 16px 64px;
  }

  #faq .faq-columns {
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
  }

  #faq .faq-main {
    padding: 36px 36px 16px;
  }

  #faq .faq-heading {
    margin-bottom: 24px;
    font-size: 34px;
  }

  #faq .faq-sidebar {
    position: sticky;
    top: 110px;
  }

  #faq .faq-sidebar-card {
    padding: 32px 28px 34px;
  }
}

/* Mobile footer: logo on the left, social links on the right of it. */
@media (max-width: 720px) {
  /* Both rows share the same two columns, so "Stay Connected" and "Contact"
     start at the same left edge. */
  .footer-brand {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    align-items: start;
    gap: 0;
    padding: 32px 0;
  }

  .footer-social-heading {
    margin-bottom: 8px;
  }

  /* One vertical rhythm: every footer block gets the same 32px above and below. */
  .footer-links {
    padding: 32px 0;
  }

  .footer-bottom {
    padding: 32px 0;
  }

  /* Keep everything inside the page gutters on narrow phones: the grid column
     may shrink, and the Contact column takes whatever room the Site column
     leaves, so the email never pokes out past the right margin. */
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-links {
    grid-template-columns: 152px minmax(0, 1fr);
    column-gap: 0;
  }

  .footer-col-cta {
    grid-column: 1 / -1;
  }

  .footer-col a,
  .footer-social a {
    overflow-wrap: anywhere;
  }
}

/* Mobile: every section headline (everything except the hero H1) is one size. */
@media (max-width: 720px) {
  #the-problem .pain-headline,
  .combo-title,
  .products-title,
  .price-title,
  .support-title,
  .order-title,
  .know-title,
  .founder-title,
  #faq .faq-heading {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
  }
}