/* Maintenance Plan — page-specific styles (display quote + offer-card
   centerpiece only; everything else reuses shared classes from css/main.css). */

.quote-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw + 1rem, 2.1rem);
  line-height: 1.35;
  max-width: 44ch;
  margin: var(--s3) 0 0;
}
.quote-display em {
  font-style: normal;
  color: var(--terracotta);
}

/* Surface (background/border/radius) comes from .surface in main.css. */
.offer-card {
  position: relative;
  padding: var(--s5) var(--s4);
  max-width: 720px;
  margin-inline: auto;
  box-shadow: var(--shadow-soft);
  /* Subtle U.S.A. nod on the Ultimate Savings Agreement card. */
  border-top: 4px solid;
  border-image: linear-gradient(90deg, var(--terracotta) 0 33%, var(--white) 33% 66%, var(--cool) 66% 100%) 1;
}
@media (min-width: 700px) {
  .offer-card { padding: var(--s6); }
}

.offer-card__seal-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s4);
}
@media (min-width: 700px) {
  /* Seal straddles the card's top edge; the card reserves headroom so the
     seal never lands on the checklist text. */
  .offer-card__seal-wrap {
    position: absolute;
    top: -84px;
    right: var(--s5);
    margin-bottom: 0;
  }
  .offer-card { padding-top: calc(var(--s6) + var(--s5)); }
}

.offer-card__list {
  display: grid;
  gap: var(--s3);
  margin: 0 0 var(--s4);
}
.offer-card__list li {
  position: relative;
  padding-left: calc(var(--s4) + var(--s2));
  font-size: 1.05rem;
}
.offer-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../../images/snowflake.svg") center/contain no-repeat;
}

/* .divider-top (main.css) supplies the rule + padding. */
.offer-card__note {
  font-weight: 700;
  margin: 0 0 var(--s4);
}