/* New Patient Deals on the homepage, rebuilt as text with the layout of the old
   promo graphic and the site's pastel sunset colors: an old lace card and a
   peach-to-lavender deal band. The Webflow stylesheet sets p to white Open Sans
   at 2.1vh and h2 to white uppercase Oswald, so these rules are scoped under
   .nk-deals. */

/* The heading keeps the look of the <p class="paragraph-17"> it replaced. */
.nk-deals-heading {
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

.nk-deals {
  --nk-ink: #161616;
  --nk-card: #fff4e5;                  /* intro strip and lower band (Webflow old lace) */
  --nk-band: linear-gradient(180deg, #ffd6c2 0%, #ffdde3 55%, #e6defb 100%);
  --nk-accent: #b4533c;                /* eyebrows and the return-offer heading; salmon, darkened for small text */
  --nk-divider: rgba(255, 133, 106, .65);
  --nk-price-accent: #c63a33;          /* the $0.01 bonus price */
  box-sizing: border-box;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden;
  background: var(--nk-card);
  color: var(--nk-ink);
  font-family: "Open Sans", Arial, sans-serif;
  text-align: center;
  box-shadow: 0 10px 30px rgba(14, 39, 14, .08);
}
.nk-deals *, .nk-deals *::before, .nk-deals *::after { box-sizing: border-box; }
.nk-deals p, .nk-deals li {
  margin: 0;
  color: var(--nk-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}
.nk-deals h3 {
  margin: 0;
  color: var(--nk-ink);
  font-family: Recoleta, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.nk-deals strong { font-weight: 700; }
.nk-deals .nk-nowrap { white-space: nowrap; }

.nk-deals .nk-deals-intro { padding: 16px 24px; font-size: 16px; }

/* Sunset band with the four deals */
.nk-deals .nk-deals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 24px;
  margin: 0;
  padding: 24px 12px 26px;
  list-style: none;
  background: var(--nk-band);
}
.nk-deals .nk-deal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
}
.nk-deals .nk-deal + .nk-deal { border-left: 2px dotted var(--nk-divider); }
.nk-deals .nk-deal h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  font-size: 21px;
  line-height: 1.15;
}
.nk-deals .nk-deal-img {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 480 / 537;
  margin: 8px auto 6px;
}
/* The product photos are cut out onto white (scripts/deals/crop-products.ps1);
   multiply lets the band show through the white, whatever its color. */
.nk-deals .nk-deal-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.nk-deals .nk-deal-price {
  font-family: Recoleta, Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
}
.nk-deals .nk-deal-price small {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
}
.nk-deals .nk-deal-detail { margin-top: 6px; font-size: 14px; }

/* Lower band: first-visit bonus and the return discounts */
.nk-deals .nk-deals-extras {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  padding: 24px 26px 8px;
  text-align: left;
}
.nk-deals .nk-eyebrow {
  color: var(--nk-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.nk-deals .nk-bonus { display: flex; align-items: center; gap: 16px; }
.nk-deals .nk-bonus img {
  flex: none;
  width: 58px;
  height: auto;
  mix-blend-mode: multiply;
}
.nk-deals .nk-bonus h3 { font-size: 23px; line-height: 1.15; }
.nk-deals .nk-bonus .nk-deal-price { margin: 4px 0 6px; color: var(--nk-price-accent); font-size: 34px; }
.nk-deals .nk-bonus .nk-deal-price small { color: var(--nk-price-accent); }
.nk-deals .nk-return h3 { color: var(--nk-accent); font-size: 23px; line-height: 1.15; }
.nk-deals .nk-return ul { margin: 8px 0 0; padding: 0; list-style: none; }
.nk-deals .nk-return li { padding: 5px 0; }
.nk-deals .nk-return li + li { border-top: 1px dotted var(--nk-divider); }
.nk-deals .nk-fine {
  padding: 14px 26px 22px;
  color: #444;
  font-size: 12.5px;
  text-align: left;
}

@media screen and (max-width: 991px) {
  .nk-deals .nk-deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-deals .nk-deal:nth-child(odd) { border-left: 0; }
  .nk-deals .nk-deals-extras { grid-template-columns: 1fr; gap: 20px; }
}
@media screen and (max-width: 767px) {
  /* Webflow caps the hero column at 75%, which left only ~250px on phones. */
  .inner.hero-inner { max-width: 100%; }
  .hero-headline { text-wrap: balance; }
}
@media screen and (max-width: 429px) {
  /* The headline wrapped cleanly in the old narrow column; widening it left
     one-word lines, so keep the headline itself at that width. */
  .hero-headline { max-width: 235px; }
}
@media screen and (max-width: 479px) {
  .nk-deals .nk-deals-intro { padding: 14px 16px; font-size: 15px; }
  .nk-deals .nk-deals-grid { padding: 20px 4px 22px; }
  .nk-deals .nk-deal { padding: 0 8px; }
  .nk-deals .nk-deal h3 { font-size: 17px; }
  .nk-deals .nk-deal-price { font-size: 30px; }
  .nk-deals .nk-deal-price small { font-size: 14px; }
  .nk-deals .nk-deal-detail { font-size: 13px; }
  .nk-deals .nk-deals-extras { padding: 20px 18px 6px; }
  .nk-deals .nk-fine { padding: 12px 18px 18px; }
}