/* Review-only additions. Prices/features remain in the existing Elementor widgets. */
#pricing.cs-mascot-pricing { padding-inline: 80px; }
#pricing.cs-mascot-pricing > .elementor-container { max-width: 1200px; }
#pricing.cs-mascot-pricing .elementor-element-e8dafd2 { margin-top: 96px; }
#pricing.cs-mascot-pricing .elementor-inner-column > .elementor-widget-wrap { position: relative; }
#pricing.cs-mascot-pricing .cs-pricing-mascot {
  position: absolute; height: auto; margin: 0; z-index: 2; pointer-events: none; user-select: none;
}
#pricing.cs-mascot-pricing .cs-pricing-mascot .elementor-widget-container { height: auto; }
#pricing.cs-mascot-pricing .cs-pricing-mascot img { display: block; width: 100%; height: auto; }
#pricing.cs-mascot-pricing .cs-peek-left { width: 82px; left: -68px; top: 24px; }
#pricing.cs-mascot-pricing .cs-peek-top { width: 142px; right: 18px; top: -116px; }
#cs-conversation {
  background: #f3eee9; color: #111619; padding: 16px 32px; overflow: hidden;
  font-family: 'Inter', sans-serif;
}
#cs-conversation > .elementor-container { max-width: 1280px; align-items: center; }
#cs-conversation .elementor-widget-wrap { padding: 0; align-content: center; }
#cs-conversation .cs-conversation-copy { z-index: 1; }
#cs-conversation .cs-conversation-eyebrow { margin-bottom: 20px; }
#cs-conversation .cs-conversation-eyebrow::before { content: ''; display: block; width: 30px; height: 3px; background: #e97816; border-radius: 2px; margin-bottom: 10px; }
#cs-conversation .cs-conversation-eyebrow .elementor-heading-title { font: 600 10px/1.5 'Inter', sans-serif; letter-spacing: .18em; color: #49525a; }
#cs-conversation .cs-conversation-title { margin-bottom: 24px; }
#cs-conversation .cs-conversation-title .elementor-heading-title { font: 800 clamp(30px, 3.6vw, 52px)/1.08 'Inter', sans-serif; letter-spacing: -.045em; color: #111619; }
#cs-conversation .elementor-button { display: inline-flex; align-items: center; justify-content: center; background: #111619; color: #fff; border: 1px solid #111619; border-radius: 14px; padding: 14px 22px; min-height: 48px; font: 650 14px/1.4 'Inter', sans-serif; }
#cs-conversation .elementor-button-content-wrapper { align-items: center; gap: 10px; }
#cs-conversation .elementor-button-icon svg { width: 20px; height: 20px; }
#cs-conversation .elementor-button:hover { background: #303638; }
#cs-conversation a:focus-visible { outline: 3px solid #99410b; outline-offset: 4px; }
#cs-conversation .cs-conversation-art img {
  width: 100%; height: auto; display: block;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 94%, transparent), linear-gradient(0deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 94%, transparent), linear-gradient(0deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
}
@media (max-width: 1024px) {
  #pricing.cs-mascot-pricing { padding-inline: 60px; }
  #pricing.cs-mascot-pricing .elementor-element-e8dafd2 > .elementor-container { grid-template-columns: 1fr; gap: 32px; max-width: 620px; }
  #pricing.cs-mascot-pricing .elementor-element-e8dafd2 { margin-top: 32px; }
  #pricing.cs-mascot-pricing .elementor-element-d9b5009 { margin-top: 94px; }
  #pricing.cs-mascot-pricing .cs-peek-left { width: 68px; left: -48px; }
  #cs-conversation { padding-inline: 28px; }
}
@media (max-width: 767px) {
  #pricing.cs-mascot-pricing { padding: 64px 20px 64px 48px; }
  #pricing.cs-mascot-pricing .cs-peek-left { width: 52px; left: -37px; top: 28px; }
  #pricing.cs-mascot-pricing .cs-peek-top { width: 122px; top: -100px; }
  #pricing.cs-mascot-pricing .elementor-element-d9b5009 { margin-top: 82px; }
  #cs-conversation { padding: 44px 24px 20px; }
  #cs-conversation > .elementor-container { flex-direction: column; }
  #cs-conversation .elementor-column { width: 100%; }
  #cs-conversation .cs-conversation-title .elementor-heading-title { font-size: clamp(28px, 8vw, 40px); }
  #cs-conversation .cs-conversation-art { margin-top: 24px; }
}
/* Explicit widths also cover Elementor's legacy column presets. */
@media (min-width: 768px) {
  #cs-conversation .cs-conversation-copy { width: 45%; }
  #cs-conversation .cs-conversation-art { width: 55%; }
  #cs-conversation .cs-conversation-art img { height: 330px; object-fit: cover; }
}
#cs-conversation .elementor-button { background: #111619 !important; color: #fff !important; }
#cs-conversation .elementor-button:hover { background: #303638 !important; }
#cs-conversation .cs-conversation-art img {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 52%, transparent 74%);
}

/* Approved one-shot peeks, triggered when each mascot enters view. */
#pricing .cs-peek-left { transform-origin: 85% 78%; }
#pricing .cs-peek-top { transform-origin: 50% 96%; }
#pricing .cs-peek-left.cs-peek-play { animation: cs-peek-left-in 3.8s ease-in-out both; }
#pricing .cs-peek-top.cs-peek-play { animation: cs-peek-top-in 3.8s .3s ease-in-out both; }
@keyframes cs-peek-left-in {
  0% { transform: translateX(12px) rotate(8deg); opacity: 0; }
  18% { opacity: 1; }
  30% { transform: translateX(-4px) rotate(-3deg); }
  48% { transform: translateX(0) rotate(0); }
  65% { transform: translateX(0) rotate(-2deg); }
  85%, 100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes cs-peek-top-in {
  0% { transform: translateY(16px) scale(.94); opacity: 0; }
  18% { opacity: 1; }
  32% { transform: translateY(-5px) rotate(2deg); }
  50% { transform: translateY(0) rotate(0); }
  68% { transform: translateY(-3px) rotate(-1deg); }
  85%, 100% { transform: translateY(0) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #pricing .cs-pricing-mascot { animation: none !important; } }
/* The existing mobile pricing scroller must not clip decorative card-edge artwork. */
#pricing.cs-mascot-pricing .elementor-element-e8dafd2 > .elementor-container { overflow: visible !important; scroll-snap-type: none; }
@media (max-width: 767px) {
  #pricing.cs-mascot-pricing .elementor-element-e8dafd2 > .elementor-container { padding: 0; }
}