/* ============================================================
   Features — Component Styles
   Design tokens are defined in src/tokens.css.
   ============================================================ */

.features {
  background-color: var(--background);
  box-sizing:       border-box;
  display:          flex;
  flex-direction:   column;
  font-family:      var(--font-family-default);
  padding:        6rem 0; /* 96px */
  width:          100%;
}


/* ============================================================
   Title group
   ============================================================ */

.features__title-group {
  padding-bottom: 4rem;       /* 64px */
}

@media (max-width: 767px) {
  .features__title-group {
    padding-bottom: 2.25rem;  /* 36px */
  }
}

.features__title {
  color:       var(--foreground);
  font-size:   2.25rem;       /* 36px */
  font-weight: var(--font-weight-bold);
  line-height: 2.5rem;        /* 40px */
  margin:      0;
}


/* ============================================================
   Filter tags row — hidden for now, kept for future use
   ============================================================ */

.features__filter-row {
  align-items:  center;
  display:      flex;
  flex-wrap:    wrap;
  gap:          0.75rem;      /* 12px */
  padding-bottom: 2rem;       /* 32px */
}

.features__filter-label {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.features__filter-tags {
  align-items: center;
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.5rem;        /* 8px */
}

/* ---- Individual filter tag ---- */
.feature-filter-tag {
  align-items:     center;
  background:      none;
  border:          1px solid transparent;
  border-radius:   var(--radius-full);
  color:           var(--muted-foreground);
  cursor:          pointer;
  display:         inline-flex;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  gap:             0.375rem;  /* 6px */
  height:          1.625rem;  /* 26px */
  line-height:     1;
  padding:         0 0.75rem; /* 0 12px */
  transition:      background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space:     nowrap;
}

.feature-filter-tag--active {
  background-color: var(--opacity-primary-10);
  border-color:     transparent;
  color:            var(--primary);
}

.feature-filter-tag:not(.feature-filter-tag--active):hover {
  background-color: var(--muted);
  color:            var(--foreground);
}

.feature-filter-tag__close {
  font-size:   0.875rem;
  line-height: 1;
}


/* ============================================================
   Feature groups layout
   ============================================================ */

.features__groups {
  display:        flex;
  flex-direction: column;
  gap:            3rem;       /* 48px between billing groups */
}

.features__group {
  align-items:           start;
  display:               grid;
  grid-template-columns: 9rem 1fr; /* label col | accordion col */
}

.features__group-label {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  padding-top: 0.625rem;      /* align with accordion header text */
}

.features__accordion-list {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem; /* 12px */
}


/* ============================================================
   Accordion answer subtext
   ============================================================ */

.features__answer-sub {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-xs);
  line-height: var(--line-height-xs);
  margin-top:  0.5rem;
}


/* ============================================================
   Mobile — Webflow landscape breakpoint (<=767px)
   ============================================================ */

@media (max-width: 767px) {
  .features {
    padding: 4rem 0;
  }

  .features__title {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }

  .features__group {
    grid-template-columns: 1fr;
  }

  .features__group-label {
    padding-top:    0;
    padding-bottom: 0.5rem;
  }
}

/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  width:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet + landscape mobile (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Portrait mobile (≤479px): 24px × 2 = 48px */
@media (max-width: 479px) {
  .container {
    max-width: calc(100% - 48px);
  }
}