/* =========================================================
   Pricing cards (Figma: Home › pricing, Work with me › cards)
   Shared by Home and Work with me. Horizontal drag-scroll lives in site.js.
   ========================================================= */
.pricing__scroller {
  width: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--pad-x);
  scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;
}
.pricing__scroller::-webkit-scrollbar { display: none; }
.pricing__scroller.is-drag { cursor: grabbing; scroll-snap-type: none; }
.pricing__cards { display: flex; align-items: stretch; gap: 24px; width: max-content; padding: 0 var(--pad-x); }
.price {
  --c-title: rgba(221, 211, 185, .8); --c-value: #ddd3b9; --c-list: rgba(221, 211, 185, .7); --c-line: rgba(221, 211, 185, .5); --c-dot: #ddd3b9;
  position: relative; isolation: isolate; overflow: hidden;
  width: 605px; border-radius: 24px; padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 42px;
  scroll-snap-align: start; user-select: none;
}
.price::before, .price::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; }
.price::after { background: var(--grain-dark) 0 0 / 256px 256px repeat; opacity: 1; }
.price--sand::after { background-image: var(--grain-light); opacity: .32; } /* cream card: 16% overlay = light tile at .32 */
.price--sand {
  --c-title: #252525; --c-value: #252525; --c-list: rgba(37, 37, 37, .7); --c-line: rgba(37, 37, 37, .6); --c-dot: #252525;
  background: linear-gradient(144.55deg, #ddd1b3 5.88%, #d4c59c 92.99%);
}
.price--sand::before { inset: auto; left: -.94%; top: 54.34%; width: 107.29%; height: 86.83%; border-radius: 0; background: url("../img/column-ruins-700.webp") 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; opacity: .2; }
.price--blue { width: 606px; background: linear-gradient(180deg, var(--blue-700), var(--blue-900)); }
.price--rest { background: var(--blue-700); justify-content: flex-start; }
.price--rest::before { background: url("../img/painting-ruins-960.webp") center / cover no-repeat; mix-blend-mode: screen; opacity: .15; }
.price__main { width: 100%; display: flex; flex-direction: column; gap: 42px; }
.price__title { display: flex; flex-direction: column; gap: 16px; }
.price__title h3 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; color: var(--c-title); }
.price__value { display: flex; align-items: flex-end; gap: 12px; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--c-value); white-space: nowrap; }
.price__value small { letter-spacing: -.04em; font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--c-title); margin-bottom: 2px; }
.divider { display: flex; align-items: center; width: 100%; height: 24px; }
.divider::before { content: ""; flex: 0 0 17px; height: 17px; margin: 0 2.5px 0 3.5px; border: 1px solid var(--c-line); transform: rotate(45deg); }
.divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.price__list { display: flex; flex-direction: column; gap: 24px; }
.price__list li { display: flex; gap: 8px; align-items: flex-start; min-height: 40px; font-size: 24px; line-height: 1.2; letter-spacing: -.04em; color: var(--c-list); }
.price__list li::before { content: ""; flex: 0 0 40px; height: 40px; margin-top: -8px; background: radial-gradient(circle at center, var(--c-dot) 4px, transparent 4.5px); }
.price__list b { font-weight: 400; color: #ddd3b9; }

/* On-view reveal: headline + staggered cards (Home pricing / Work with me offers) */
/* Hidden only when JS will reveal them: readers and agents without JS see the cards. */
.js [data-pricing-reveal] .pricing__head,
.js [data-pricing-reveal] .price {
  opacity: 0;
  transform: translateY(28px);
}
[data-pricing-reveal].is-in .pricing__head,
[data-pricing-reveal].is-in .price {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-pricing-reveal].is-in .price:nth-child(1) { transition-delay: .12s; }
[data-pricing-reveal].is-in .price:nth-child(2) { transition-delay: .24s; }
[data-pricing-reveal].is-in .price:nth-child(3) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  [data-pricing-reveal] .pricing__head,
  [data-pricing-reveal] .price {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1200px) {
  .pricing__scroller { container-type: inline-size; overflow: visible; cursor: auto; scroll-snap-type: none; }
  .pricing__cards { width: 100%; justify-content: center; }
  .price, .price--blue {
    width: min(640px, calc((100cqi - 2 * var(--pad-x) - 48px) / 3));
    flex: 0 0 auto; min-width: 0;
  }
}
/* Side by side (≥1200): the three cards share one row grid (subgrid), so each card's title, first divider,
   list, second divider and button sit on the same lines even when one title wraps to two lines. */
@media (min-width: 1200px) {
  .pricing__cards { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(5, auto); column-gap: 24px; row-gap: 0; }
  .price { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 42px; justify-items: stretch; }
  .price__main { display: contents; }
  .price > .btn { justify-self: start; align-self: end; }
}
@media (min-width: 1200px) and (max-width: 1679px) {
  .price__title h3 { font-size: 20px; }
  .price__value { font-size: 48px; }
  .price__value small { font-size: 18px; }
  .price__list li { font-size: 18px; min-height: 32px; }
  .price__list li::before { flex-basis: 32px; height: 32px; margin-top: -6px; }
}
@media (min-width: 1680px) {
  .price__title h3 { font-size: 28px; }
  .price__value { font-size: 64px; }
  .price__value small { font-size: 28px; margin-bottom: 0; }
  .price .btn { font-size: 20px; }
}

@media (max-width: 1199px) {
  .pricing__scroller { overflow: visible; cursor: auto; }
  .pricing__cards { flex-direction: column; width: 100%; padding: 0; }
  .price, .price--blue { width: 100%; gap: 80px; justify-content: flex-start; }
}

@media (max-width: 699px) {
  .pricing__cards { gap: 32px; }
  .price, .price--blue { padding: 20px; gap: 42px; }
  .price__main { gap: 24px; }
  .price__title { gap: 8px; }
  .price--rest .price__title { gap: 16px; }
  .price__title h3 { font-size: 18px; }
  .price__value { font-size: 40px; gap: 10px; }
  .price__value small { font-size: 18px; }
  .price__list li { font-size: 18px; }
  .price__list li { min-height: 32px; }
  .price__list li::before { flex-basis: 32px; height: 32px; margin-top: -6px; }
  .price .btn { width: 100%; }
}