/* A price cut in three beats: strike, reveal, saving. Static content is the default. */
.pricetags { position: relative; width: min(760px, 100%); margin: 44px auto 0; padding: 0 24px; perspective: 1000px; }
.price-card {
  --price-rx: 0deg; --price-ry: 0deg; --price-lift: 0px; --light-x: 45%; --light-y: 0%;
  position: relative; isolation: isolate; padding: 28px 36px 24px; text-align: left;
  border: 1px solid #f2efe71c; border-radius: 10px;
  background: linear-gradient(125deg, #1e1d19, #111113 75%);
  box-shadow: inset 0 1px 0 #ffffff04, 0 30px 70px -38px #000c;
  transform: translateY(var(--price-lift)) rotateX(var(--price-rx)) rotateY(var(--price-ry));
  transition: transform .28s ease-out, border-color .28s;
}
.price-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 440px 260px at var(--light-x) var(--light-y), #e2a33c0c, transparent 85%);
}
.price-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, #f7d99d0b 48%, transparent 72%);
  opacity: 0;
}
.price-card-head, .price-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.price-card-head { min-height: 36px; }
.ptag-chip { font-size: 10px; font-weight: 500; letter-spacing: .16em; color: #c8c1b2; text-transform: uppercase; }
.price-replay {
  flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid #f2efe71b; border-radius: 50%; color: #b4ad9f; background: transparent; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.price-replay[hidden] { display: none; }
.price-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.price-replay:hover, .price-replay:focus-visible { color: var(--amber); border-color: #e2a33c66; background: #e2a33c08; }
.price-change { display: grid; grid-template-columns: .85fr 1.45fr; align-items: center; gap: 28px; padding: 31px 0 32px; font-variant-numeric: tabular-nums; }
.price-old { display: block; position: relative; width: max-content; max-width: 100%; }
.price-card .was { display: block; font-family: Archivo, Inter, sans-serif; font-size: clamp(40px, 5.2vw, 62px); font-weight: 600; letter-spacing: -.07em; line-height: 1.1; color: #a29b8f; }
.price-strike { position: absolute; left: -5%; top: -13%; width: 112%; height: 128%; overflow: visible; }
.price-strike path { stroke: var(--amber); stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.price-new { display: block; overflow: clip; padding: 9px 5px 12px; margin: -9px -5px -12px; }
.price-card .now { display: block; font-family: Archivo, Inter, sans-serif; font-size: clamp(76px, 8.4vw, 116px); font-weight: 700; letter-spacing: -.075em; line-height: 1; color: var(--bone); transform-origin: 20% 100%; }
.price-card-foot { padding-top: 24px; border-top: 1px solid #f2efe71b; min-height: 64px; }
.ptag-label { font-size: 11px; letter-spacing: .11em; line-height: 1.5; color: #c4bfb6; text-transform: uppercase; }
.ptag-save { display: block; flex: none; padding: 8px 13px; border-radius: 3px; color: var(--ink); background: var(--amber); font-size: 12px; font-weight: 700; letter-spacing: -.015em; transform: rotate(-4deg); box-shadow: 0 3px 10px #0003; }
/* Pending state only exists when the observer is installed. No-JS and reduced motion show the offer. */
.pricing-ready:not(.is-revealed) .price-strike path { stroke-dashoffset: 1; }
.pricing-ready:not(.is-revealed) .now, .pricing-ready:not(.is-revealed) .ptag-save { opacity: 0; }
.pricing-ready:not(.is-revealed) .was { color: var(--bone); }
.price-card.is-playing .price-strike path { animation: price-strike .55s cubic-bezier(.5,0,.1,1) .3s both; }
.price-card.is-playing .was { animation: price-cut .65s ease .4s both; }
.price-card.is-playing .now { animation: price-arrive .85s cubic-bezier(.18,.8,.24,1.12) .66s both; }
.price-card.is-playing .ptag-save { animation: price-stamp .65s cubic-bezier(.18,.8,.24,1.2) 1.02s both; }
.price-card.is-playing .price-replay svg { animation: price-replay 1.6s ease both; }
.price-replay[aria-disabled="true"] { opacity: .45; }
.price-card.is-playing::after { animation: price-light .9s ease .65s both; }
@keyframes price-replay { to { transform: rotate(360deg); } }
@keyframes price-strike { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes price-cut { 0%, 20% { color: var(--bone); transform: none; } 45% { transform: translate(-3px, 1px) rotate(-2deg); } 100% { color: #a29b8f; transform: none; } }
@keyframes price-arrive { 0% { opacity: 0; transform: translateY(115%) rotate(5deg); } 100% { opacity: 1; transform: none; } }
@keyframes price-stamp { 0% { opacity: 0; transform: scale(1.35) rotate(-12deg); } 60% { opacity: 1; transform: scale(.96) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes price-light { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .price-card:hover { border-color: #e2a33c45; } }
@media (max-width: 640px) {
  .price-card { padding: 22px 26px 23px; }
  .ptag-chip { font-size: 9px; letter-spacing: .075em; }
  .price-replay { flex-basis: 40px; width: 40px; height: 40px; }
  .price-change { grid-template-columns: 1fr; gap: 18px; padding: 23px 0 29px; }
  .price-card .was { font-size: 38px; }
  .price-old { margin-left: 2px; }
  .price-card .now { font-size: clamp(68px, 20.5vw, 116px); }
  .price-card-foot { gap: 12px; padding-top: 20px; }
  .ptag-label { font-size: 9px; letter-spacing: .08em; max-width: 17em; }
  .ptag-save { padding: 7px 10px; font-size: 11px; }
}
@media (max-width: 360px) {
  .pricetags { padding: 0 20px; }
  .price-card { padding: 19px 21px 22px; }
  .price-card-head { gap: 8px; }
  .ptag-chip { font-size: 8px; letter-spacing: .035em; }
  .price-card-foot { gap: 10px; }
  .ptag-label { font-size: 8px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .price-card { transform: none; transition: none; }
  .price-card *, .price-card::after { animation: none !important; }
  .pricing-ready:not(.is-revealed) .price-strike path { stroke-dashoffset: 0; }
  .pricing-ready:not(.is-revealed) .now, .pricing-ready:not(.is-revealed) .ptag-save { opacity: 1; }
  .price-replay { display: none; }
}