.pricing { padding:12px 0 130px; scroll-margin-top:44px; }
.pricing-heading { margin:0 auto 48px; text-align:center; }
.pricing-heading h2 { margin:0; font-size:clamp(32px,3.8vw,50px); font-weight:750; line-height:1.2; letter-spacing:-.04em; }
.pricing-heading h2 span { display:inline-block; margin-left:.08em; font-family:'Orange Marker',Manrope,sans-serif; font-size:1.23em; font-weight:400; letter-spacing:0; color:var(--accent); transform:rotate(-1.5deg); }
.pricing-grid { display:grid; gap:28px; max-width:1120px; margin:0 auto; }
.pricing-stage { min-width:0; perspective:1600px; }
.pricing-card { --plan-color:#d87b53; position:relative; isolation:isolate; display:grid; grid-template-columns:285px minmax(0,1fr); gap:38px; padding:36px; border-radius:32px; }
.pricing-card::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(125deg,#1b1b15f5,#10110ff7 48%,#0d0e0cf7); filter:blur(.65px); box-shadow:0 22px 45px -24px #000b; pointer-events:none; }
.pricing-card[data-moving] { will-change:transform; }
.pricing-card>.author-glare { z-index:2; contain:paint; }
.pricing-cover { position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:flex-start; padding:4px 0 0 3px; }
.pricing-card h3 { margin:0; font-size:36px; font-weight:700; line-height:1.08; letter-spacing:-.035em; color:#efeee7; }
.pricing-cover h3 span { display:inline-block; font-family:'Orange Marker',Manrope,sans-serif; font-size:1.75em; line-height:.85; font-weight:400; letter-spacing:0; color:var(--plan-color); transform:rotate(-4deg); margin-left:.03em; }
.pricing-vip { --plan-color:#c7dd87; }
.pricing-vip .pricing-cover h3 span { margin-left:0; margin-right:.07em; transform:rotate(-3deg); }
.pricing-intro { margin:20px 0 0; color:#b0b1a6; font-size:16px; font-weight:500; line-height:1.55; text-wrap:pretty; }
.pricing-art { display:block; width:calc(100% + 24px); max-width:316px; height:auto; margin:22px -12px -6px; overflow:visible; }
.pricing-art-pro { transform:rotate(-2deg); }
.pricing-art-vip { transform:rotate(1.5deg); }
.pricing-detail { display:flex; flex-direction:column; gap:25px; min-width:0; }
.pricing-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 28px; padding:0; margin:3px 0 2px; list-style:none; }
.pricing-features li { position:relative; padding-left:0; font-size:15px; line-height:1.5; font-weight:500; color:#aeb3a2; text-wrap:pretty; }
.pricing-features strong { display:block; margin-bottom:5px; color:#ecefe1; font-size:16px; line-height:1.4; font-weight:650; letter-spacing:-.02em; }
.pricing-features li>span { display:block; }
.pricing-vip .pricing-features { gap:25px 28px; }
.pricing-vip .pricing-features li:last-child { grid-column:1/-1; max-width:470px; padding:14px 0 0 22px; font-size:17px; color:#c8cfb9; }
.pricing-vip .pricing-features li:last-child::before { content:''; position:absolute; left:0; top:18px; width:4px; height:calc(100% - 20px); border-radius:100% 50% 50% 100%; background:#b5c77a; transform:rotate(-3deg); }
.pricing-checkout { position:relative; isolation:isolate; container-type:inline-size; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; margin: auto -9px -5px; padding:25px 24px; color:#211c16; }
.pricing-checkout::before { content:''; z-index:-1; position:absolute; inset:0; border-radius:22px 25px 20px 23px; background:#d27950; transform:rotate(-.65deg); box-shadow:0 7px 15px -10px #0008; }
.pricing-checkout::after { content:''; position:absolute; inset:0; border-radius:22px; pointer-events:none; background:url('assets/grain.svg'); background-size:120px; mix-blend-mode:multiply; opacity:.22; transform:rotate(-.65deg); z-index:-1; }
.pricing-vip .pricing-checkout::before { background:#c4d68e; transform:rotate(.55deg); }
.pricing-vip .pricing-checkout::after { transform:rotate(.55deg); }
.pricing-cost { display:flex; align-items:center; justify-content:space-between; gap:.25em; font-size:clamp(14px,5.8cqw,40px); }
.pricing-price { display:flex; align-items:baseline; gap:.12em; margin:0; font-size:inherit; letter-spacing:-.055em; font-weight:750; line-height:1.1; white-space:nowrap; font-variant-numeric:lining-nums; }
.pricing-price span { font-size:.68em; font-weight:600; line-height:1; letter-spacing:0; }
.pricing-separator { display:block; flex:none; width:.46em; height:.46em; min-width:9px; min-height:9px; background:#9c360e; -webkit-mask:url('assets/author-marker.png') center/contain no-repeat; mask:url('assets/author-marker.png') center/contain no-repeat; animation:marker-spin 12s linear infinite; }
.pricing-checkout-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pricing-action { position:relative; display:flex; justify-content:center; align-items:center; gap:8px; min-height:53px; padding:15px 21px; border:0; border-radius:999px; background:#24251e; color:#f4efda; font-size:15px; line-height:1.35; font-weight:700; text-align:center; transition:background .18s,transform .18s; }
.pricing-action:hover { background:#34362b; transform:translateY(-2px); }
.pricing-action:active { transform:translateY(0); }
.pricing-action:focus-visible { outline:2px solid #f6f5dd; outline-offset:5px; }
.pricing-action-installment { background:#24251e12; color:#25271d; box-shadow:inset 0 0 0 1px #24251e40; }
.pricing-action-installment:hover { background:#24251e24; }
.pricing-team { display:grid; grid-template-columns:225px minmax(0,1fr) 255px; align-items:center; gap:32px; padding:30px 36px; }
.pricing-team-heading { display:flex; flex-direction:column; gap:8px; }
.pricing-team-art { display:block; width:90px; height:62px; transform:rotate(-3deg); }
.pricing-team h3 { font-size:27px; }
.pricing-team .pricing-intro { margin:0; max-width:470px; }
.pricing-actions { display:grid; gap:12px; }
.pricing-team .pricing-action { min-height:54px; padding:16px 20px; background:#252921; color:#dce1cc; }
.pricing-team .pricing-action:hover { background:#353c2d; }
.pricing-team-note { margin:0; text-align:center; font-size:12px; line-height:1.5; color:#929b84; }
/* The drawings reveal once on entry; no decorative movement continues at rest. */
.pricing[data-motion='true'] .pricing-stage:not(.is-revealed) .p-pop { opacity:0; }
.pricing[data-motion='true'] .pricing-stage:not(.is-revealed) .p-draw { stroke-dasharray:1; stroke-dashoffset:1; }
.pricing[data-motion='true'] .is-revealed .p-pop { animation:pricing-paper-in .6s cubic-bezier(.2,.8,.2,1) both; }
.pricing[data-motion='true'] .is-revealed .p-front { animation-delay:.13s; }
.pricing[data-motion='true'] .is-revealed .p-note { animation-delay:.28s; }
.pricing[data-motion='true'] .is-revealed .p-draw { stroke-dasharray:1; animation:pricing-draw .65s ease-out var(--at,.4s) both; }
@keyframes pricing-paper-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pricing-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media(max-width:1100px) {
  .pricing-card { grid-template-columns:240px minmax(0,1fr); padding:30px; gap:25px; }
  .pricing-features { gap:18px 22px; }
  .pricing-checkout { padding:22px 18px; gap:20px; }
  .pricing-action { padding:14px 17px; font-size:14px; }
  .pricing-team { grid-template-columns:190px minmax(0,1fr) 225px; }
}
@media(max-width:900px) {
  .pricing-card { grid-template-columns:1fr; padding:30px; gap:26px; }
  .pricing-cover { display:grid; grid-template-columns:1fr 215px; grid-template-rows:auto auto; align-items:center; column-gap:25px; padding:0; }
  .pricing-cover h3 { align-self:end; }
  .pricing-cover .pricing-intro { margin:15px 0 0; align-self:start; }
  .pricing-art { grid-column:2; grid-row:1/3; width:215px; margin:0; }
  .pricing-detail { gap:28px; }
  .pricing-checkout { margin-inline:0; }
  .pricing-action { padding:15px 24px; font-size:16px; }
  .pricing-team { grid-template-columns:1fr 1fr; align-items:start; }
  .pricing-team-heading { grid-column:1/-1; flex-direction:row; align-items:center; gap:22px; }
  .pricing-team .pricing-action { font-size:15px; }
}
@media(max-width:560px) {
  .pricing { padding:8px 0 85px; scroll-margin-top:28px; }
  .pricing-heading { margin-bottom:33px; }
  .pricing-heading h2 { font-size:31px; }
  .pricing-heading h2 span { display:block; margin:5px 0 0; }
  .pricing-grid { gap:25px; }
  .pricing-card { padding:26px 24px; border-radius:27px; gap:20px; }
  .pricing-cover { grid-template-columns:1fr; }
  .pricing-card h3 { font-size:32px; }
  .pricing-cover h3 span { font-size:1.8em; }
  .pricing-intro { font-size:15px; margin-top:16px; }
  .pricing-art { grid-column:1; grid-row:3; width:224px; margin:14px auto 0; }
  .pricing-features { grid-template-columns:1fr; gap:18px; margin:0 0 3px; }
  .pricing-features strong { font-size:16px; margin-bottom:3px; }
  .pricing-features li { font-size:15px; }
  .pricing-vip .pricing-features li:last-child { padding-top:8px; font-size:16px; }
  .pricing-vip .pricing-features li:last-child::before { top:12px; height:calc(100% - 14px); }
  .pricing-checkout { padding:23px 20px; gap:22px; margin:0 -7px -9px; }
  .pricing-cost { display:grid; grid-template-columns:max-content auto max-content; justify-content:center; column-gap:12px; row-gap:12px; font-size:clamp(17px,7.5cqw,22px); }
  .pricing-price { justify-content:center; gap:.18em; letter-spacing:-.035em; }
  .pricing-price:first-child { grid-column:1/-1; font-size:clamp(28px,12cqw,38px); }
  .pricing-separator:nth-child(2) { display:none; }
  .pricing-checkout-actions { gap:9px; }
  .pricing-checkout-actions .pricing-action { min-height:62px; padding:13px 10px; font-size:14px; }
  .pricing-action { min-height:52px; font-size:15px; padding:15px 18px; }
  .pricing-vip .pricing-action { max-width:none; }
  .pricing-team { grid-template-columns:1fr; gap:19px; }
  .pricing-team-heading { gap:15px; }
  .pricing-team h3 { font-size:25px; }
  .pricing-team-art { width:66px; height:46px; }
  .pricing-team .pricing-actions { margin-top:2px; }
}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) {
  .pricing-card { transform:none!important; }
  .pricing-card>.author-glare { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .pricing-art * { animation:none!important; }
  .pricing-separator { animation:none; }
  .pricing-action:hover { transform:none; }
}
