/* ============================================================
   Virtual Estimate — Tweak-driven design variations.
   Toggled via data-attributes on .estimate-page set by App.jsx.
   ============================================================ */

/* ── CTA color: Navy override ────────────────────────────────────────────── */
/* Swaps the primary CTA from raspberry → navy without touching eyebrows,
   accents, or the lotus mark. Keeps the visual hierarchy intact: navy CTAs
   read more conservative / corporate; raspberry reads more retail. */

.estimate-page[data-cta-color="navy"] .btn-primary {
  background: var(--mly-navy);
  border-color: var(--mly-navy);
}
.estimate-page[data-cta-color="navy"] .btn-primary:hover {
  background: var(--mly-navy-deep);
  border-color: var(--mly-navy-deep);
  box-shadow: 0 8px 18px rgba(7, 29, 73, 0.22);
}
.estimate-page[data-cta-color="navy"] .btn-secondary {
  color: var(--mly-navy);
  border-color: var(--mly-navy);
}
.estimate-page[data-cta-color="navy"] .btn-secondary:hover {
  background: rgba(7, 29, 73, 0.05);
}
.estimate-page[data-cta-color="navy"] .service-card--popular {
  border-color: var(--mly-navy);
  box-shadow: 0 10px 28px rgba(7, 29, 73, 0.16);
}
.estimate-page[data-cta-color="navy"] .service-card__tag,
.estimate-page[data-cta-color="navy"] .tier-row__tag,
.estimate-page[data-cta-color="navy"] .tier-compare__pop-flag {
  background: var(--mly-navy);
}
.estimate-page[data-cta-color="navy"] .tier-row--popular,
.estimate-page[data-cta-color="navy"] .tier-compare__col.is-popular ~ * {
  border-color: var(--mly-navy);
}

/* ── Density: Compact ────────────────────────────────────────────────────── */
/* Pulls vertical breathing room from the results page so a customer
   considering all three tiers can compare without scrolling. Tier cards
   shrink first; chrome stays roomy. */

.estimate-page[data-density="compact"] .estimate-main {
  padding-block: clamp(24px, 4vw, 48px);
}
.estimate-page[data-density="compact"] .step-indicator {
  padding: 8px 0 22px;
}
.estimate-page[data-density="compact"] .section-lede {
  margin-bottom: 18px;
}
.estimate-page[data-density="compact"] .results-head {
  margin-bottom: 18px;
  gap: 18px;
}
.estimate-page[data-density="compact"] .score-block {
  padding: 16px 18px;
}
.estimate-page[data-density="compact"] .score-block__value { font-size: 36px; }

.estimate-page[data-density="compact"] .service-card {
  padding: 20px 18px;
}
.estimate-page[data-density="compact"] .service-card__price { font-size: 30px; }
.estimate-page[data-density="compact"] .service-card__desc  { margin-bottom: 12px; }
.estimate-page[data-density="compact"] .service-card__bullets {
  margin-top: 12px;
  padding-top: 12px;
  gap: 6px;
}
.estimate-page[data-density="compact"] .service-card__cta { padding-top: 12px; }

.estimate-page[data-density="compact"] .promise-banner {
  margin-top: 22px;
  padding: 18px 22px;
}
.estimate-page[data-density="compact"] .trust-strip {
  margin-top: 28px;
  padding-top: 22px;
}

.estimate-page[data-density="compact"] .tier-row { padding: 18px 22px; gap: 18px; }
.estimate-page[data-density="compact"] .tier-row__price { font-size: 28px; }

/* ============================================================
   Layout: Compare (feature-comparison table)
   ============================================================ */

.tier-compare {
  margin: 0 -8px;
  /* Compare table widens past the inner 880px column on larger screens
     so columns don't crush — let it bleed slightly under the parent's
     padding instead of forcing horizontal scroll right away. */
}

.tier-compare__inner {
  overflow-x: auto;
  border-radius: var(--mly-radius-md);
  background: var(--mly-white);
  border: 1px solid var(--mly-line);
  box-shadow: var(--mly-shadow-md);
  padding: 4px;
}

.tier-compare__table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mly-fs-body-sm);
}

.tier-compare__col-feature { width: 32%; }
.tier-compare__col { width: 17%; }

/* Header row — tier names + prices */

.tier-compare__feature-head,
.tier-compare__tier-head {
  background: var(--mly-blush-soft);
  padding: 22px 18px;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 1px solid var(--mly-line);
}

.tier-compare__feature-head {
  border-top-left-radius: var(--mly-radius-md);
}

.tier-compare__feature-eyebrow {
  display: block;
  font-size: var(--mly-fs-caption);
  font-weight: var(--mly-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mly-ls-eyebrow);
  color: var(--mly-raspberry);
  margin-bottom: 6px;
}

.tier-compare__feature-sub {
  display: block;
  font-size: var(--mly-fs-caption);
  font-weight: var(--mly-fw-medium);
  color: var(--mly-ink-3);
  line-height: 1.5;
  max-width: 30ch;
  text-transform: none;
  letter-spacing: 0;
}

.tier-compare__tier-head {
  text-align: center;
  position: relative;
}

.tier-compare__tier-head.is-popular {
  background: var(--mly-blush);
  box-shadow: inset 0 3px 0 var(--mly-raspberry);
}

.tier-compare__pop-flag {
  display: inline-block;
  background: var(--mly-raspberry);
  color: var(--mly-white);
  font-size: 10px;
  font-weight: var(--mly-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--mly-radius-pill);
  margin-bottom: 10px;
}

.tier-compare__tier-eyebrow {
  display: block;
  font-size: var(--mly-fs-caption);
  font-weight: var(--mly-fw-bold);
  letter-spacing: var(--mly-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mly-raspberry);
  margin-bottom: 6px;
  min-height: 1em;
}

.tier-compare__tier-name {
  display: block;
  font-size: var(--mly-fs-h4);
  font-weight: var(--mly-fw-bold);
  color: var(--mly-navy);
  line-height: 1.2;
  margin-bottom: 8px;
}

.tier-compare__tier-price {
  display: block;
  font-size: 28px;
  font-weight: var(--mly-fw-bold);
  color: var(--mly-navy);
  letter-spacing: -0.01em;
  line-height: 1;
}

.tier-compare__tier-price small {
  display: block;
  font-size: 11px;
  font-weight: var(--mly-fw-medium);
  color: var(--mly-ink-3);
  letter-spacing: 0;
  margin-top: 4px;
}

/* Feature rows */

.tier-compare__feature {
  text-align: left;
  font-weight: var(--mly-fw-medium);
  color: var(--mly-navy);
  padding: 14px 18px;
  font-size: var(--mly-fs-body-sm);
  border-bottom: 1px solid var(--mly-line);
  background: var(--mly-white);
}

.tier-compare__cell {
  text-align: center;
  padding: 14px;
  border-bottom: 1px solid var(--mly-line);
  background: var(--mly-white);
  vertical-align: middle;
}

.tier-compare__cell.is-popular {
  background: var(--mly-blush-soft);
}

.tier-compare__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mly-raspberry);
}

.estimate-page[data-cta-color="navy"] .tier-compare__check {
  background: var(--mly-navy);
}

.tier-compare__dash {
  color: var(--mly-line-2);
  font-size: 18px;
}

/* Text-value cells (e.g. "Biweekly", "12 months", "3 included"). Rendered
   inline-left rather than centered so values are scannable down the column. */
.tier-compare__text {
  display: block;
  font-size: 12px;
  font-weight: var(--mly-fw-medium);
  color: var(--mly-navy);
  line-height: 1.35;
  text-align: center;
}

.tier-compare__table tbody tr:last-child .tier-compare__feature,
.tier-compare__table tbody tr:last-child .tier-compare__cell {
  border-bottom: none;
}

/* Footer (CTA row) */

.tier-compare__cta-empty,
.tier-compare__cta-cell {
  padding: 20px 14px;
  background: var(--mly-bg-soft);
  border-top: 1px solid var(--mly-line);
  text-align: center;
}

.tier-compare__cta-cell.is-popular {
  background: var(--mly-blush);
}

.tier-compare__cta-cell .btn-primary,
.tier-compare__cta-cell .btn-secondary {
  padding: 10px 18px;
  font-size: var(--mly-fs-body-sm);
  width: 100%;
}

.tier-compare__cta-empty {
  background: var(--mly-white);
}

/* Compact density tweaks for compare */
.estimate-page[data-density="compact"] .tier-compare__feature-head,
.estimate-page[data-density="compact"] .tier-compare__tier-head {
  padding: 16px 14px;
}
.estimate-page[data-density="compact"] .tier-compare__feature,
.estimate-page[data-density="compact"] .tier-compare__cell {
  padding: 10px 14px;
}
.estimate-page[data-density="compact"] .tier-compare__tier-price { font-size: 24px; }

@media (max-width: 720px) {
  .tier-compare__feature-head { width: 44%; }
}

/* ============================================================
   Layout: Stack (horizontal rows, one per tier)
   ============================================================ */

.tier-stack {
  display: grid;
  gap: 14px;
}

.tier-row {
  background: var(--mly-white);
  border: 1px solid var(--mly-line);
  border-radius: var(--mly-radius-md);
  box-shadow: var(--mly-shadow-sm);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2.2fr) auto;
  gap: 28px;
  align-items: center;
  position: relative;
  transition: box-shadow var(--mly-dur) var(--mly-ease),
              border-color var(--mly-dur) var(--mly-ease);
}

.tier-row:hover {
  box-shadow: var(--mly-shadow-md);
  border-color: var(--mly-line-2);
}

.tier-row--popular {
  border: 2px solid var(--mly-raspberry);
  box-shadow: 0 6px 18px rgba(226, 47, 124, 0.10);
  padding: 21px 25px; /* compensate for the +1px border */
}

.tier-row__tag {
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--mly-raspberry);
  color: var(--mly-white);
  font-size: 10px;
  font-weight: var(--mly-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--mly-radius-pill);
}

.tier-row__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tier-row__eyebrow {
  font-size: var(--mly-fs-caption);
  font-weight: var(--mly-fw-bold);
  letter-spacing: var(--mly-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mly-raspberry);
  margin: 0;
}

.tier-row__name {
  font-size: var(--mly-fs-h4);
  font-weight: var(--mly-fw-bold);
  color: var(--mly-navy);
  margin: 0;
  line-height: var(--mly-lh-heading);
}

.tier-row__price {
  font-size: 32px;
  font-weight: var(--mly-fw-bold);
  color: var(--mly-navy);
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  line-height: 1;
}

.tier-row__price small {
  font-size: 12px;
  font-weight: var(--mly-fw-medium);
  color: var(--mly-ink-3);
  letter-spacing: 0;
}

/* Membership offer line under the price in stack rows. */
.tier-row__offer {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: var(--mly-fw-medium);
  color: var(--mly-raspberry);
  line-height: 1.4;
}

.tier-row__body { min-width: 0; }

.tier-row__desc {
  margin: 0 0 10px;
  color: var(--mly-ink-2);
  font-size: var(--mly-fs-body-sm);
  line-height: 1.5;
}

.tier-row__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 16px;
}

.tier-row__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--mly-fs-caption);
  color: var(--mly-ink);
  line-height: 1.45;
}

.tier-row__bullets svg {
  color: var(--mly-raspberry);
  flex-shrink: 0;
  margin-top: 2px;
}

.tier-row__cta { flex-shrink: 0; }
.tier-row__cta .btn-primary,
.tier-row__cta .btn-secondary {
  padding: 12px 22px;
  font-size: var(--mly-fs-body-sm);
}

@media (max-width: 880px) {
  .tier-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tier-row__cta .btn-primary,
  .tier-row__cta .btn-secondary {
    width: 100%;
  }
}