/* ============================================================
   BENEFITS  ·  .benefits
   What a franchisee gets (sections/benefits.php). Copy and a
   bordered note on the left, a ruled list on the right; each line
   is marked with the brand sparkle, drawn as a mask so it takes
   the token colour. Tokens only.
   ============================================================ */

.benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

.benefits__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--bg-light);
  border: var(--border);
  border-radius: var(--radius-l);
}

.benefits__note-title {
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 700;
  letter-spacing: 0;
}

.benefits__note-text {
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

.benefits__list {
  display: flex;
  flex-direction: column;
}

.benefits__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-block-end: var(--border);
  font-weight: 500;
}

.benefits__item:first-child {
  border-block-start: var(--border);
}

/* One line tall, so the sparkle sits on the first line of a wrapped item. */
.benefits__item::before {
  content: "";
  width: 0.75em;
  height: 1lh;
  background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 992px) {
  .benefits__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
  }

  /* The list is the taller column; the heading and note travel with it. */
  .benefits__grid > .content {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-m));
  }
}