/* ResumeHere.com — pages-marketing page styles. Extends public/css/main.css. */

/* Pricing: one plan, so the card sits beside what it contains rather than
   floating alone in the middle of an empty band. */
.price-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .price-layout { grid-template-columns: 1fr; } }

/* Grid and flex items default to min-width:auto, which turns their intrinsic
   content width into a floor the track cannot shrink below. Without these the
   price row ($39.90 /month at 56px) forces the whole page into horizontal
   overflow on a small screen. */
.price-layout > *, .price-includes__grid > * { min-width: 0; }

.price-grid--single { grid-template-columns: minmax(0, 560px); justify-content: center; }

/* The single plan is lifted by inversion, not by shadow: it sits on the
   blue-tinted surface while everything around it stays white. */
.price-card--featured {
  background: var(--surface-tint);
  border-color: transparent;
}
.price-card__head { display: grid; gap: 8px; }
.price-card__tag {
  font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-blue);
}
.price-card__title {
  font-family: var(--font-display);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  font-weight: 500; letter-spacing: var(--tracking-heading); color: var(--color-navy);
}
.price-card__sub { color: var(--color-indigo); font-size: var(--text-caption); line-height: 1.55; }
.price-card__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 24px 0 12px; padding-top: 24px; border-top: 1px solid var(--line-solid);
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.024em;
  color: var(--color-navy); font-variant-numeric: tabular-nums;
}
.price-card__period { color: var(--color-indigo); font-size: var(--text-body); }
.price-card__note { color: var(--color-indigo); font-size: var(--text-caption); line-height: 1.55; margin-bottom: 20px; }
.price-card__cta { width: 100%; }
.price-card__list { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-solid); }
.price-card__foot {
  margin-top: 16px; text-align: center;
  font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-indigo);
}

/* What the plan contains, grouped so it reads as a map rather than a list. */
.price-includes > * + * { margin-top: 18px; }
.price-includes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
  margin-top: 32px;
}
@media (max-width: 560px) { .price-includes__grid { grid-template-columns: 1fr; gap: 28px; } }
.price-group__title {
  font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-indigo);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-hair);
}

.check-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 30px; color: var(--color-carbon); font-size: var(--text-caption); line-height: 1.5; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--color-success-bg);
}
.check-list li::after {
  content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 4px;
  border-left: 1.5px solid var(--color-success-fg); border-bottom: 1.5px solid var(--color-success-fg);
  transform: rotate(-45deg);
}
@media (max-width: 560px) { .price-card__amount { font-size: 44px; } }