/* Offer catalogue page. Kept separate from the shared theme so its layout can
   evolve without changing pricing cards on the homepage or other pages. */
.dm-pricing-page {
  padding-top: 84px;
}

.packs-shell { padding: 24px 0 96px; }
.packs-flash {
  max-width: 820px;
  margin: 0 auto 28px;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  animation: packsFlashIn .5s var(--dm-ease) both;
}
@keyframes packsFlashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.packs-flash.ok { color: #175c31; background: #eaf7ee; border-color: #b9e3c6; }
.packs-flash.err { color: #8f172a; background: #fff1f2; border-color: #f0c4ca; }

.packs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .55fr);
  align-items: end;
  gap: clamp(34px, 7vw, 100px);
  margin: 0 0 clamp(66px, 8vw, 106px);
}
.packs-hero-copy { max-width: 790px; }
.packs-hero h1 {
  max-width: 820px;
  margin: 18px 0 20px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.3rem, 6.8vw, 6.5rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.07em;
}
.packs-hero h1 em { color: var(--dm-red); font-style: normal; }
.packs-hero p {
  max-width: 660px;
  margin: 0;
  color: #68717b;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.8;
}
.packs-overview {
  position: relative;
  overflow: hidden;
  padding: 23px 24px 21px;
  border: 1px solid rgba(16, 18, 22, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 48px rgba(22, 24, 30, .07);
}
.packs-overview::after {
  position: absolute;
  top: -68px;
  right: -52px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 29, 46, .12), transparent 70%);
  content: "";
  pointer-events: none;
}
.packs-overview-label, .packs-category-count {
  color: #858b92;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.packs-overview>strong {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 8px 0 15px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -.075em;
}
.packs-overview>strong small {
  color: #737a83;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.packs-overview-meta { display: grid; gap: 9px; }
.packs-overview-meta span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #5e6670;
  font-size: 11px;
  font-weight: 700;
}
.packs-overview-meta i { width: 14px; color: var(--dm-red); text-align: center; }

.packs-required {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  margin: -46px auto 44px;
  padding: 16px 20px;
  border: 1px solid #f0c4ca;
  border-radius: 17px;
  background: #fff3f4;
  color: #8f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}
.packs-required>i { flex: 0 0 auto; font-size: 15px; }

.packs-category { margin-bottom: clamp(68px, 8vw, 108px); }
.packs-category:last-of-type { margin-bottom: 44px; }
.packs-category-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .56fr);
  align-items: end;
  gap: 30px 64px;
  margin-bottom: 28px;
}
.packs-category-head h2, .compare-head h2, .packs-bottom h2 {
  margin: 13px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.06em;
}
.packs-category-summary { display: grid; justify-items: start; gap: 9px; }
.packs-category-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(16, 18, 22, .07);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #69717a;
  letter-spacing: .07em;
}
.packs-category-head p {
  max-width: 470px;
  margin: 0;
  color: #707780;
  font-size: 13px;
  line-height: 1.75;
}

.packs-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  margin-bottom: 74px;
}
.packs-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ------------------------------------------------------------------
   Premium card system for the offer grid.
   Reuses the design tokens and the interaction model already used by the
   homepage catalogue cards (#plans-grid in platform-theme.css): CSS-only
   3D tilt, lift, staggered reveal, and a light reflection driven by the
   same custom properties (--price-tilt-* / --price-light-*). packs-cards.js
   only moves those variables to follow the pointer on fine-pointer devices.
   Everything stays scoped to .packs-grid so no other page is affected.
   ------------------------------------------------------------------ */
.dm-pricing-page .dm-price-card {
  --price-tilt-x: 0deg;
  --price-tilt-y: 0deg;
  --price-light-x: 50%;
  --price-light-y: 8%;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid rgba(16, 18, 22, .08);
  border-radius: 25px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 15px 38px rgba(22, 24, 30, .055);
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
  transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, 22px, 0);
  transition: opacity .6s var(--dm-ease), transform .5s var(--dm-ease), box-shadow .4s var(--dm-ease), border-color .3s ease, background-color .45s var(--dm-ease), color .32s var(--dm-ease);
}
.dm-pricing-page .dm-price-card.is-visible {
  transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, 0, 0);
}
/* Light reflection: behind the content, clipped to the card surface. */
.dm-pricing-page .dm-price-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--price-light-x) var(--price-light-y), rgba(255, 255, 255, .5), transparent 58%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.dm-pricing-page .dm-price-card.popular::before {
  background: radial-gradient(circle at var(--price-light-x) var(--price-light-y), rgba(239, 35, 60, .22), transparent 60%);
}
.dm-pricing-page .dm-price-card>:not(.popular-badge) { position: relative; z-index: 1; transform: translateZ(12px); }
.dm-pricing-page .dm-price-card .popular-badge { z-index: 2; transform: translateZ(20px); }
.dm-pricing-page .dm-price-card:hover,
.dm-pricing-page .dm-price-card:focus-within {
  z-index: 2;
  transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, -8px, 0);
  border-color: rgba(225, 29, 46, .2);
  box-shadow: 0 34px 76px rgba(20, 23, 28, .17);
}
.dm-pricing-page .dm-price-card:hover::before,
.dm-pricing-page .dm-price-card:focus-within::before { opacity: 1; }
.dm-pricing-page .dm-price-card.popular {
  border-color: rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, #191c22 0%, #101216 78%);
  box-shadow: 0 22px 55px rgba(16, 18, 22, .20);
  color: #fff;
}
.dm-pricing-page .dm-price-card.popular:not(.is-visible) {
  transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, 22px, 0);
}
.dm-pricing-page .dm-price-card.popular.is-visible {
  transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, -10px, 0);
}
.dm-pricing-page .dm-price-card.popular:hover,
.dm-pricing-page .dm-price-card.popular:focus-within {
  transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, -15px, 0);
  border-color: rgba(225, 29, 46, .42);
  box-shadow: 0 38px 82px rgba(16, 18, 22, .25), 0 16px 42px rgba(225, 29, 46, .14);
}
/* Subtle tilt fallback when the page script is unavailable: the inline
   custom properties set by packs-cards.js take over otherwise. */
.dm-pricing-page .dm-price-card:nth-child(odd):hover,
.dm-pricing-page .dm-price-card:nth-child(odd):focus-within { --price-tilt-x: 1.6deg; --price-tilt-y: -2deg; --price-light-x: 30%; --price-light-y: 14%; }
.dm-pricing-page .dm-price-card:nth-child(even):hover,
.dm-pricing-page .dm-price-card:nth-child(even):focus-within { --price-tilt-x: 1.6deg; --price-tilt-y: 2deg; --price-light-x: 70%; --price-light-y: 14%; }
/* While the pointer moves the card must track it quickly; it eases back more
   slowly once the pointer leaves (is-tilting is removed by the script). */
.dm-pricing-page .dm-price-card.is-tilting {
  transition: transform .14s linear, box-shadow .4s var(--dm-ease), border-color .3s ease, background-color .45s var(--dm-ease), color .32s var(--dm-ease);
}
.dm-pricing-page .popular-badge {
  top: 15px;
  right: 15px;
  max-width: calc(100% - 30px);
  padding: 7px 9px;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-align: center;
}
.dm-pricing-page .popular .price-head { padding-top: 32px; }
.dm-pricing-page .price-head { gap: 9px; font-size: 9px; }
.dm-pricing-page .price-head span:last-child { text-align: right; }
.dm-pricing-page .price-tier { min-height: 13px; margin-top: 27px; font-size: 9px; }
.dm-pricing-page .price { gap: 6px; margin-top: 9px; }
.dm-pricing-page .price strong { font-size: clamp(2.65rem, 4.3vw, 3.65rem); line-height: .98; }
.dm-pricing-page .price span { font-size: 10px; white-space: nowrap; }
.dm-pricing-page .dm-price-card>p {
  min-height: 65px;
  margin: 17px 0 19px;
  color: #6e7680;
  font-size: 12px;
  line-height: 1.7;
}
.dm-pricing-page .dm-price-card.popular>p { color: #b1b7bf; }
.dm-pricing-page .dm-price-card ul {
  flex: 1 0 auto;
  gap: 11px;
  margin: 0 0 23px;
}
.dm-pricing-page .dm-price-card li {
  align-items: flex-start;
  gap: 9px;
  color: #535b65;
  font-size: 11px;
  line-height: 1.5;
}
.dm-pricing-page .dm-price-card li i { flex: 0 0 13px; margin-top: 2px; }
.dm-pricing-page .dm-price-card.popular li { color: #d1d5da; }
.dm-pricing-page .price-action {
  min-height: 48px;
  gap: 9px;
  margin-top: auto;
  padding: 12px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}
.dm-pricing-page .price-action i { flex: 0 0 auto; transition: transform .25s var(--dm-ease); }
/* The action is lifted with the card in 3D; the icon glides on hover and the
   whole button gives a discreet press feedback without ever leaving the card. */
.dm-pricing-page .dm-price-card>.price-action:hover { transform: translateZ(16px) translateY(-2px); }
.dm-pricing-page .price-action:hover i { transform: translateX(3px); }
.dm-pricing-page .dm-price-card>.price-action:active { transform: translateZ(16px) translateY(1px) scale(.99); }
.dm-pricing-page .price-action:focus-visible,
.packs-bottom .dm-primary-action:focus-visible {
  outline: 3px solid rgba(225, 29, 46, .38);
  outline-offset: 3px;
}
.packs-highlight { border-color: var(--dm-red) !important; box-shadow: 0 0 0 2px rgba(229, 29, 49, .18), var(--dm-shadow-sm) !important; }
.packs-note { display: flex; align-items: center; gap: 7px; color: #777f89 !important; font-size: 11px !important; }

/* Premium picker — a required, explicit level choice before the card's action
   can be followed. Colours are inherited, so it reads correctly on the light
   card and on the dark (dark-mode) card without a second palette. */
.dm-pricing-page .premium-picker {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.dm-pricing-page .premium-picker-title {
  color: var(--dm-red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}
.dm-pricing-page .premium-picker-options { display: grid; gap: 6px; }
.dm-pricing-page .premium-picker-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(16, 18, 22, .14);
  border-radius: 12px;
  color: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .2s var(--dm-ease), background .2s var(--dm-ease);
}
html.dark .dm-pricing-page .premium-picker-option { border-color: rgba(255, 255, 255, .16); }
.dm-pricing-page .premium-picker-option:hover { border-color: rgba(229, 29, 49, .55); background: rgba(229, 29, 49, .06); }
.dm-pricing-page .premium-picker-option:has(input:checked) {
  border-color: var(--dm-red);
  background: rgba(229, 29, 49, .09);
}
.dm-pricing-page .premium-picker-option:has(input:focus-visible) {
  outline: 3px solid rgba(225, 29, 46, .38);
  outline-offset: 2px;
}
.dm-pricing-page .premium-picker-option input { flex: 0 0 auto; margin-top: 2px; accent-color: #e51d31; }
.dm-pricing-page .premium-picker-option strong { font-weight: 800; }
.dm-pricing-page .premium-picker-hint {
  margin: 0;
  color: #777f89 !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}
html.dark .dm-pricing-page .premium-picker-hint { color: #a0a8b2 !important; }
.dm-pricing-page .premium-picker-hint[hidden] { display: none; }
/* The action is a <button> inside the picker form, so it must opt out of the
   native control styling that the <a> version of .price-action never had. */
.dm-pricing-page button.price-action {
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dm-pricing-page button.price-action:not(:disabled):hover { transform: translateY(-2px); }
.dm-pricing-page button.price-action:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.packs-empty { padding: 38px; border: 1px dashed var(--dm-line); border-radius: 22px; color: #6f7780; text-align: center; }

.packs-compare {
  padding: clamp(23px, 3vw, 38px);
  border: 1px solid rgba(16, 18, 22, .08);
  border-radius: 27px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 48px rgba(22, 24, 30, .055);
}
.compare-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr);
  align-items: end;
  gap: 25px 50px;
  margin-bottom: 25px;
}
.compare-head h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); }
.compare-head p { margin: 0; color: #707780; font-size: 13px; line-height: 1.75; }
.compare-table-wrap {
  overflow: auto;
  border: 1px solid rgba(16, 18, 22, .07);
  border-radius: 15px;
  scrollbar-color: #bbc0c7 transparent;
  scrollbar-width: thin;
}
.compare-table-wrap:focus-visible { outline: 3px solid rgba(225, 29, 46, .3); outline-offset: 3px; }
.packs-compare table { width: 100%; min-width: 690px; border-collapse: collapse; }
.packs-compare th, .packs-compare td {
  padding: 14px 15px;
  border-bottom: 1px solid rgba(16, 18, 22, .07);
  text-align: center;
  font-size: 12px;
}
.packs-compare th {
  background: rgba(244, 245, 247, .85);
  color: #68717b;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.packs-compare td:first-child, .packs-compare th:first-child { position: sticky; left: 0; text-align: left; }
.packs-compare th:first-child { z-index: 2; background: #f0f1f3; }
.packs-compare td:first-child { background: #fff; font-weight: 750; }
.packs-compare td:not(:first-child) { font-weight: 800; }
.packs-compare tbody tr:last-child td { border-bottom: 0; }
.packs-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 42px;
  padding: 30px 34px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: linear-gradient(120deg, #191c22, #101216);
  color: #fff;
}
.packs-bottom>div>span { color: #a1a8b1; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.packs-bottom h2 { margin-top: 8px; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.packs-bottom .dm-primary-action { flex: 0 0 auto; padding: 14px 18px; background: var(--dm-red); }

html.dark .packs-overview, html.dark .packs-compare { border-color: rgba(255, 255, 255, .08); background: rgba(23, 27, 33, .95); }
html.dark .packs-hero p, html.dark .packs-category-head p, html.dark .compare-head p { color: #a0a8b2; }
html.dark .packs-overview-meta span { color: #c1c7cf; }
html.dark .packs-category-count { border-color: rgba(255, 255, 255, .08); background: #1c1f24; color: #b5bdc6; }
html.dark .dm-pricing-page .dm-price-card:not(.popular) { border-color: rgba(255, 255, 255, .08); background: #181c22; }
/* Keep the hover/focus emphasis visible in dark mode: the rule above is more
   specific than the light-mode :hover border, so it needs a dark counterpart. */
html.dark .dm-pricing-page .dm-price-card:not(.popular):hover,
html.dark .dm-pricing-page .dm-price-card:not(.popular):focus-within { border-color: rgba(229, 29, 49, .45); }
html.dark .dm-pricing-page .dm-price-card>p, html.dark .dm-pricing-page .dm-price-card li { color: #b0b7c0; }
html.dark .dm-pricing-page .dm-price-card .price-head, html.dark .dm-pricing-page .price span { color: #a0a8b2; }
html.dark .packs-compare th { background: #22272e; color: #bbc2ca; }
html.dark .packs-compare th:first-child { background: #20252c; }
html.dark .packs-compare td:first-child { background: #171b20; }
html.dark .packs-compare td { border-color: rgba(255, 255, 255, .08); }
html.dark .packs-required { border-color: rgba(240, 140, 152, .22); background: #2b181d; color: #ffc5cc; }

/* Navbar brand — packs.php vs index.html (visual reference):
   telc-theme-dark.css is loaded ONLY on packs.php and forces
   `html.dark span { color: inherit }` (specificity 0,1,2), which beats the
   canonical `.dm-brand-word span { color: var(--dm-red) }` (0,1,1) and turns
   the red "maak" suffix white in dark mode. index.html does not load that
   legacy sheet, so this rule restores the exact reference rendering on packs.php. */
html.dark .dm-topbar .dm-brand-word span { color: var(--dm-red); }

/* Same legacy-sheet side effect, on the page canvas: telc-theme-dark.css also
   forces `html.dark body { background-color:#0f172a !important; color:#e2e8f0
   !important }` (0,1,2). The shared public layer (public-pages.css, loaded by
   every other public page) paints the dark body as #101318 / #f7f7f5. This
   scoped, page-only override restores those exact reference colours on packs.php. */
html.dark body.dm-pricing-page { background: #101318 !important; color: #f7f7f5 !important; }

@media (max-width: 1179px) {
  .packs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packs-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .dm-pricing-page { padding-top: 72px; }
  .packs-shell { padding: 24px 0 76px; }
  .packs-hero { grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); gap: 28px; margin-bottom: 70px; }
  .packs-hero h1 { font-size: clamp(3rem, 8vw, 4.5rem); }
  .packs-overview { padding: 19px; }
  .packs-category-head, .compare-head { grid-template-columns: 1fr; gap: 16px; }
  .packs-category-summary { max-width: 540px; }
  .packs-category-head h2 { margin-top: 10px; }
  .packs-required { margin-top: -34px; }
}
@media (max-width: 600px) {
  .packs-shell { padding: 24px 0 62px; }
  .packs-hero { grid-template-columns: 1fr; gap: 24px; margin-bottom: 58px; }
  .packs-hero h1 { max-width: 540px; font-size: clamp(2.9rem, 13vw, 4.2rem); }
  .packs-hero p { font-size: 14px; }
  .packs-overview { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 17px 18px; }
  .packs-overview-label { grid-column: 1; }
  .packs-overview>strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 2.8rem; }
  .packs-overview-meta { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 8px; margin-top: 9px; }
  .packs-grid, .packs-grid-wide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dm-pricing-page .dm-price-card { padding: 23px 21px 20px; }
  .dm-pricing-page .dm-price-card.popular.is-visible { transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, 0, 0); }
  .dm-pricing-page .dm-price-card.popular:hover,
  .dm-pricing-page .dm-price-card.popular:focus-within { transform: perspective(1100px) rotateX(var(--price-tilt-x)) rotateY(var(--price-tilt-y)) translate3d(0, -6px, 0); }
  .dm-pricing-page .dm-price-card>p { min-height: 0; }
  .packs-required { align-items: flex-start; margin: -25px 0 35px; padding: 14px; font-size: 12px; }
  .packs-category { margin-bottom: 63px; }
  .packs-compare { padding: 19px 15px; border-radius: 21px; }
  .compare-head h2 { font-size: 2rem; }
  .compare-head p { font-size: 12px; }
  .packs-bottom { flex-direction: column; align-items: stretch; margin-top: 30px; padding: 24px 21px; }
  .packs-bottom .dm-primary-action { width: 100%; }
}
/* Touch devices: no permanent pointer tracking. Cards stay flat so a tap can
   focus the link without a distracting tilt, and the light reflection is off. */
@media (hover: none) {
  .dm-pricing-page .dm-price-card:hover,
  .dm-pricing-page .dm-price-card:focus-within,
  .dm-pricing-page .dm-price-card.popular:hover,
  .dm-pricing-page .dm-price-card.popular:focus-within {
    transform: perspective(1100px) rotateX(0) rotateY(0) translate3d(0, 0, 0);
  }
  .dm-pricing-page .dm-price-card::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-pricing-page .dm-price-card,
  .dm-pricing-page .dm-price-card.is-visible,
  .dm-pricing-page .dm-price-card:hover,
  .dm-pricing-page .dm-price-card:focus-within,
  .dm-pricing-page .dm-price-card.popular,
  .dm-pricing-page .dm-price-card.popular.is-visible,
  .dm-pricing-page .dm-price-card.popular:hover,
  .dm-pricing-page .dm-price-card.popular:focus-within { transform: none; transition: none; will-change: auto; }
  .dm-pricing-page .dm-price-card>:not(.popular-badge) { transform: none; }
  .dm-pricing-page .price-action i { transition: none; }
  .packs-flash { animation: none; }
}

/* ------------------------------------------------------------------
   Decorative « money » backdrop — this page only.
   Yellow $ with a light black outline, drifting softly BEHIND the whole
   page. The visual is a repeating SVG tile, so the symbol count is free
   (no node per dollar) and the markup is a single fixed container.

   Guarantees:
   • strictly decorative: pointer-events:none everywhere, and the layer
     lives at z-index 0 while the real content is lifted to z-index 1,
     so it can never cover a card/price/button nor intercept a click;
   • keeps the light AND the dark theme (yellow + outline are constant);
   • subtle top/bottom fade so it never fights the navbar or the footer;
   • prefers-reduced-motion stops the motion entirely.
   ------------------------------------------------------------------ */
.dm-money-rain {
  --dm-money-tile: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%20160'%3E%3Ctext%20x='80'%20y='99'%20text-anchor='middle'%20font-family='Arial,Helvetica,sans-serif'%20font-size='72'%20font-weight='700'%20fill='%23FFD23F'%20stroke='%23101216'%20stroke-width='5'%20paint-order='stroke'%20stroke-linejoin='round'%20transform='rotate(-7%2080%2099)'%3E$%3C/text%3E%3C/svg%3E");
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.dm-money-rain > i {
  position: absolute;
  inset: -30%;
  display: block;
  background-image: var(--dm-money-tile);
  background-repeat: repeat;
  background-position: 0 0;
  will-change: transform, translate, rotate;
}
/* Three depths (big/medium/small) at different speeds and delays, so the
   field never reads as one grid and no symbol ever stops on the same spot. */
.dm-money-rain > i:nth-child(1) {
  background-size: 320px 320px;
  opacity: .15;
  animation: dmMoneyDrift1 134s linear infinite, dmMoneyBob 13s ease-in-out infinite, dmMoneySway 26s ease-in-out infinite;
}
.dm-money-rain > i:nth-child(2) {
  background-size: 235px 235px;
  opacity: .20;
  animation: dmMoneyDrift2 98s linear infinite, dmMoneyBob 10s ease-in-out infinite, dmMoneySway 33s ease-in-out infinite;
  animation-delay: -5s, -2s, -6s;
}
.dm-money-rain > i:nth-child(3) {
  background-size: 165px 165px;
  opacity: .12;
  animation: dmMoneyDrift3 69s linear infinite, dmMoneyBob 8s ease-in-out infinite, dmMoneySway 41s ease-in-out infinite;
  animation-delay: -11s, -3s, -13s;
}
/* Each drift is exactly one tile, so the loop is seamless (no jump). */
@keyframes dmMoneyDrift1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-320px, -320px, 0); } }
@keyframes dmMoneyDrift2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-235px, -235px, 0); } }
@keyframes dmMoneyDrift3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-165px, -165px, 0); } }
@keyframes dmMoneyBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -22px; } }
/* A very light rocking of the whole field so the symbols read as floating. */
@keyframes dmMoneySway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

/* Lift the real content above the decorative layer. The fixed topbar and
   the offer cards keep their own (higher) stacking, so nothing changes. */
body.dm-pricing-page > main,
body.dm-pricing-page > footer.dm-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .dm-money-rain > i { animation: none; }
}