:root {
  --price-ink: #29282d;
  --price-paper: #f7f6f2;
  --price-line: rgba(41, 40, 45, .18);
  --price-soft: #69666c;
}

.pricing-story-page { margin: 0; color: var(--price-ink); background: var(--price-paper); font-family: PPNeueMontreal, Arial, sans-serif; }
.pricing-story { overflow: hidden; color: var(--price-ink); }
.pricing-hero { padding: 166px 40px 68px; text-align: center; }
.pricing-hero > p,
.pricing-reference header > p,
.pricing-planes > p,
.pricing-final > p,
.pricing-card small,
.pricing-terms > div > p { font: 500 12px/1.2 SimplonMono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.pricing-hero h1 { margin-top: 28px; font-size: clamp(72px, 6vw, 102px); line-height: .9; letter-spacing: -.07em; font-weight: 440; }
.pricing-hero em,
.pricing-reference em { color: inherit; font-weight: inherit; font-style: italic; }
.pricing-hero > span { display: block; max-width: 760px; margin: 30px auto 0; color: var(--price-soft); font-size: 20px; line-height: 1.42; }
.pricing-status { width: min(720px, 100%); margin: 32px auto 0; padding: 18px 22px; border: 1px solid var(--price-line); border-radius: 18px; background: #eeece7; }
.pricing-status strong,
.pricing-status span { display: block; }
.pricing-status span { margin-top: 5px; color: var(--price-soft); font-size: 14px; }

.pricing-plans { width: min(1260px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 132px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pricing-card { min-height: 710px; display: flex; flex-direction: column; padding: 42px 42px 36px; border: 1px solid rgba(41, 40, 45, .12); border-radius: 30px 30px 30px 0; background: #eeece7; box-shadow: none; transition: transform .45s cubic-bezier(.2, .7, .2, 1), background .35s ease; }
.pricing-card--graha { background: #dedcd6; box-shadow: 0 14px 34px rgba(43, 29, 28, .12); }
.pricing-card:hover { transform: translateY(-5px); background: #fff; }
.pricing-card h2 { margin-top: 26px; font-size: 38px; line-height: 1.08; font-weight: 400; letter-spacing: -.04em; }
.pricing-card > p { min-height: 116px; margin-top: 14px; color: var(--price-soft); font-size: 16px; line-height: 1.48; }
.pricing-price { margin-top: 24px; }
.pricing-price strong,
.pricing-price span,
.pricing-annual strong,
.pricing-annual span { display: block; }
.pricing-price strong { font-size: 48px; font-weight: 300; letter-spacing: -.055em; }
.pricing-price span { margin-top: 4px; color: var(--price-soft); }
.pricing-annual { margin-top: 15px; padding: 15px 0; border-block: 1px solid var(--price-line); }
.pricing-annual strong { font-size: 17px; font-weight: 520; }
.pricing-annual span { margin-top: 4px; color: var(--price-soft); font-size: 13px; line-height: 1.35; }
.pricing-card ul { margin: 24px 0 0; padding: 0; list-style: none; }
.pricing-card li { position: relative; padding: 13px 0 13px 28px; border-bottom: 1px solid var(--price-line); font-size: 15px; }
.pricing-card li::before { content: ""; position: absolute; left: 1px; top: 16px; width: 16px; height: 16px; background: radial-gradient(circle, #29282d 1px, transparent 1.6px) 0 0 / 5px 5px; clip-path: polygon(0 30%, 65% 30%, 65% 0, 100% 50%, 65% 100%, 65% 70%, 0 70%); }
.pricing-card button { min-height: 54px; width: 100%; margin-top: auto; border: 1px solid var(--price-line); border-radius: 28px; color: #5e5b60; background: #d8d5d0; font: inherit; font-weight: 520; }
.pricing-card button[disabled] { cursor: not-allowed; opacity: 1; }
.pricing-card button:focus-visible,
.pricing-final a:focus-visible { outline: 3px solid #29282d; outline-offset: 3px; }

.pricing-terms { padding: 120px 40px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 64px; background: #e4e0d9; }
.pricing-terms h2 { max-width: 520px; margin-top: 20px; font-size: clamp(52px, 5vw, 82px); line-height: .92; letter-spacing: -.06em; font-weight: 420; }
.pricing-terms dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pricing-terms dl > div { min-height: 210px; padding: 28px; border: 1px solid var(--price-line); border-radius: 26px 26px 26px 0; background: rgba(255, 255, 255, .5); }
.pricing-terms dt { font-size: 22px; font-weight: 520; }
.pricing-terms dd { margin: 17px 0 0; color: var(--price-soft); line-height: 1.5; }

.pricing-reference,
.pricing-planes { padding: 150px 40px; }
.pricing-reference { background: var(--price-paper); }
.pricing-reference header { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: end; }
.pricing-reference header > p { grid-column: 1 / -1; }
.pricing-reference h2,
.pricing-planes h2,
.pricing-final h2 { font-size: clamp(58px, 6vw, 108px); line-height: .9; letter-spacing: -.065em; font-weight: 440; }
.pricing-reference header > span { max-width: 440px; color: var(--price-soft); font-size: 20px; line-height: 1.4; }
.pricing-reference > div { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pricing-reference article { min-height: 410px; position: relative; overflow: hidden; padding: 0; border-radius: 28px 28px 28px 0; background: #d9d8d3; }
.pricing-reference img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.pricing-reference article:hover img { transform: scale(1.025); }
.pricing-reference article::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(24, 24, 27, .72)); }
.pricing-reference small,
.pricing-reference h3 { position: relative; z-index: 1; color: #fff; }
.pricing-reference small { display: block; padding: 28px 28px 0; font: 500 11px/1.2 SimplonMono, monospace; text-transform: uppercase; }
.pricing-reference h3 { position: absolute; left: 28px; right: 28px; bottom: 28px; max-width: 80%; margin: 0; font-size: 38px; line-height: .95; }
.pricing-planes { color: #fff; background: #29282d; }
.pricing-planes > div { margin-top: 74px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pricing-planes article { min-height: 360px; display: flex; flex-direction: column; padding: 30px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 28px 28px 28px 0; }
.pricing-planes article > span { font: 500 12px/1 SimplonMono, monospace; color: rgba(255, 255, 255, .7); }
.pricing-planes h3 { margin-top: auto; font-size: 38px; }
.pricing-planes article p { margin-top: 18px; color: rgba(255, 255, 255, .62); }
.pricing-final { min-height: 650px; display: grid; place-content: center; padding: 70px 18px; text-align: center; background: #ddd9d2; }
.pricing-final > span { max-width: 560px; margin: 28px auto 0; color: #57545a; font-size: 18px; }
.pricing-final a { min-height: 60px; margin: 40px auto 0; display: inline-flex; align-items: center; padding: 0 26px; border-radius: 31px; color: #fff; background: #29282d; }

@media (max-width: 900px) {
  .pricing-plans { grid-template-columns: 1fr; max-width: 620px; }
  .pricing-card { min-height: 640px; }
  .pricing-card > p { min-height: 0; }
  .pricing-terms { grid-template-columns: 1fr; }
}

@media (max-width: 730px) {
  .pricing-hero { padding: 132px 18px 70px; }
  .pricing-hero h1 { font-size: 52px; line-height: .95; }
  .pricing-hero > span { font-size: 18px; }
  .pricing-plans { width: auto; margin: 0; padding: 0 18px 92px; gap: 18px; }
  .pricing-card { min-height: 610px; padding: 32px 28px; }
  .pricing-card h2 { font-size: 34px; }
  .pricing-price strong { font-size: 44px; }
  .pricing-terms,
  .pricing-reference,
  .pricing-planes { padding: 92px 18px; }
  .pricing-terms { gap: 38px; }
  .pricing-terms dl,
  .pricing-reference header,
  .pricing-reference > div,
  .pricing-planes > div { grid-template-columns: 1fr; }
  .pricing-terms h2,
  .pricing-reference h2,
  .pricing-planes h2,
  .pricing-final h2 { font-size: 52px; }
  .pricing-reference header > span { margin-top: 24px; }
  .pricing-reference article { min-height: 380px; }
  .pricing-final { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-reference img { transition: none !important; transform: none !important; }
}