/* Production alignment refinements; existing headings and copy are unchanged. */

/* The combined email/phone mark had a wider icon box than the other service rows. */
.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] > span:first-child {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

/* Reserve the same icon column for each service row, including the paired
   email/phone mark, without scaling the SVGs themselves. */
.heed-luxury #top .heed-hero-product > span:first-child {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

/* Center these narrow headline boxes over their already-centered supporting copy. */
.heed-luxury #pricing .luxury-section-head > h2,
.heed-luxury #request > .container > h2,
.heed-luxury footer .container > h2 {
  margin-inline: auto;
}

/* Keep process-card titles on a consistent two-line rhythm at desktop widths. */
.heed-luxury #how-it-works .heed-process h2 {
  max-width: 100%;
  min-height: 2.2em;
  margin-block: 0;
  font-size: clamp(1.7rem, 2.35vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The three-column process cards are narrow at tablet widths; use compact type
   and equalize the title area so each description begins on the same row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .heed-luxury #how-it-works .heed-process h2 {
    min-height: 3.25em;
    font-size: 1.125rem;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
}

/* Single-column process cards have room for a comfortable two-line title. */
@media (max-width: 767px) {
  .heed-luxury #how-it-works .heed-process h2 {
    min-height: 0;
    font-size: clamp(1.25rem, 5.4vw, 1.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
}

/* At the narrowest phone width, keep titles compact enough to avoid a third line. */
@media (max-width: 359px) {
  .heed-luxury #how-it-works .heed-process h2 {
    font-size: 1.2rem;
  }
}

/* Sample-card headings were inline, so their descriptions flowed into the title. */
.heed-luxury #sample .title-container > h3,
.heed-luxury #sample .title-container > span {
  display: block;
  max-width: 100%;
}

.heed-luxury #sample .title-container > h3 {
  margin: 0 0 0.3em;
  line-height: 1.2;
}

.heed-luxury #sample .title-container > span {
  line-height: 1.5;
}

/* On the three-column process layout, pin the small metadata line to the same
   baseline in each existing equal-height panel without adding card height. */
@media (min-width: 768px) {
  .heed-luxury #how-it-works .heed-process > [data-slot="card-content"] > div > div.min-w-0.flex-1 {
    display: flex;
    flex-direction: column;
  }

  .heed-luxury #how-it-works .heed-process > [data-slot="card-content"] > div > div.min-w-0.flex-1 > p:last-of-type {
    margin-top: auto;
    padding-block-start: 20px;
  }
}

/* Keep the first contact-price badge from making the remaining cards' offer
   details appear a row lower. Match the existing badge's 26px visual offset. */
@media (min-width: 1024px) {
  .heed-luxury #pricing [data-package-panel="contacts"] .luxury-pricing-grid > .heed-package-card:not(:first-child) > [data-slot="card-content"] {
    padding-block-start: 50px;
  }
}

/* At tablet widths only cards two and three share the first row with the
   highlighted starter package; leave the second row's natural spacing alone. */
@media (min-width: 768px) and (max-width: 1023px) {
  .heed-luxury #pricing [data-package-panel="contacts"] .luxury-pricing-grid > .heed-package-card:nth-child(2) > [data-slot="card-content"],
  .heed-luxury #pricing [data-package-panel="contacts"] .luxury-pricing-grid > .heed-package-card:nth-child(3) > [data-slot="card-content"] {
    padding-block-start: 50px;
  }
}

/* Give the existing lower sample-card title/description groups one shared
   height so all three data tables begin on the same baseline. */
@media (min-width: 1024px) {
  .heed-luxury #sample [data-sample-bottom-grid="true"] > div > .title-container {
    min-height: 5em;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .heed-luxury #sample [data-sample-bottom-grid="true"] > div > .title-container {
    min-height: 6.25em;
  }
}