/* ============================================================
   JOVEL CREATIVE, PRICING
   B2 direction: concise, scannable, open explanation.
   ============================================================ */

.pricing-hero-note {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-1);
  border-left: 5px solid var(--color-accent-deep);
  padding-left: var(--space-4);
  max-width: 44rem;
}
.pricing-hero-note strong { font-size: 1rem; }
.pricing-hero-note span { color: var(--color-ink-soft); font-size: 0.95rem; }

.pricing-section-head { margin-bottom: var(--space-6); }

.pricing-list { display: grid; border-bottom: var(--border); }
.pricing-row {
  display: grid;
  gap: 1.25rem;
  border-top: var(--border);
  padding: var(--space-6) 0;
}
@media (min-width: 820px) {
  .pricing-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-6) 0;
  }
}
.pricing-service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.pricing-index {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-accent-deep);
  letter-spacing: 0.08em;
  padding-top: 0.2rem;
}
.pricing-service h3 { font-size: 1.12rem; margin-bottom: var(--space-1); }
.pricing-service p { color: var(--color-ink-soft); font-size: 0.93rem; max-width: 54ch; }
.pricing-amount { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 820px) {
  .pricing-amount { min-width: 9.5rem; align-items: flex-end; text-align: right; }
}
.pricing-amount small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.pricing-amount strong {
  color: var(--color-accent-deep);
  font-size: 1.75rem;
  line-height: 1.1;
}
.pricing-footnote {
  margin-top: var(--space-6);
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  max-width: 70ch;
}

.pricing-included-section { background: var(--color-bg); }
.pricing-two-col { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .pricing-two-col { grid-template-columns: 0.75fr 1.25fr; gap: var(--space-16); }
}
.pricing-two-col h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: var(--space-3);
  max-width: 18ch;
}
.pricing-included { list-style: none; display: grid; }
.pricing-included li {
  border-top: 1.5px solid var(--color-line);
  padding: var(--space-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-2);
}
.pricing-included li:first-child { border-top: var(--border); }
.pricing-included strong { font-size: 0.98rem; }
.pricing-included span { color: var(--color-ink-soft); font-size: 0.92rem; }

.pricing-quote-section { background: var(--color-panel); }
.quote-factors { display: grid; gap: var(--space-8); }
.quote-factors-compact { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .quote-factors-compact { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}
.quote-factors article { border-top: var(--border); padding-top: var(--space-4); }
.quote-factors article > span {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-accent-deep);
}
.quote-factors h3 { font-size: 1.03rem; margin: var(--space-2) 0; }
.quote-factors p { color: var(--color-ink-soft); font-size: 0.91rem; }
.file-review-note {
  margin-top: var(--space-8);
  border-left: 4px solid var(--color-accent-deep);
  padding-left: var(--space-4);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  max-width: 72ch;
}
.file-review-note strong { color: var(--color-ink); }

.pricing-promises {
  border-top: var(--border);
  border-bottom: var(--border);
  background: var(--color-accent-wash);
}
.pricing-promises-grid { display: grid; }
@media (min-width: 760px) {
  .pricing-promises-grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing-promises-grid > div {
  padding: var(--space-5, 1.25rem) 0;
  display: grid;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-line);
}
.pricing-promises-grid > div:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .pricing-promises-grid > div {
    padding: var(--space-6);
    border-bottom: 0;
    border-right: 1px solid var(--color-line);
  }
  .pricing-promises-grid > div:first-child { padding-left: 0; }
  .pricing-promises-grid > div:last-child { border-right: 0; padding-right: 0; }
}
.pricing-promises-grid strong { font-size: 0.98rem; }
.pricing-promises-grid span { color: var(--color-ink-soft); font-size: 0.88rem; }

@media (max-width: 560px) {
  .pricing-row { padding: var(--space-5, 1.25rem) 0; }
  .pricing-service { grid-template-columns: 1fr; gap: var(--space-2); }
  .pricing-index { padding-top: 0; }
}