/* Section wrapper — small gap under navbar */
#tiers { padding-top: 2rem; }

/* Constrain page width so 2-up grid fits nicely */
#tiers .tiers-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Main Title */
#tiers .tiers-title{
  font-family:"Chelsea Market",serif;
  font-size:clamp(2.2rem,4vw,3rem);
  font-weight:550;
  line-height:1.4;
  text-align:center;
  color:var(--headingColor,#e32b68);
  max-width:900px;
  margin:1.5rem auto 1rem;
  letter-spacing:.1em;
}

/* Intro block */
#tiers .tiers-intro{
  max-width:900px;
  margin:0 auto 2.25rem;
  padding:0 1rem;
  text-align:left;
  color:var(--bodyTextColor,#251b1b);  /* lighter grey */
  line-height:1.7;
  font-size:1.1rem;
}

#tiers .tiers-intro p{ margin:0 0 1rem; }
#tiers .tiers-intro ol{ margin:.5rem 0 0; padding-left:1.25rem; }
#tiers .tiers-intro li{ margin:0 0 .5rem; }

/* Grid: 1 col on mobile, 2 cols ≥900px */
#tiers .tiers-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 900px){
  #tiers .tiers-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Card */
#tiers .listing-card{
  background:#fff;
  border:1px solid var(--cardBorder,#dcdcdc);
  border-radius:var(--radius,12px);
  padding:2rem;
  box-shadow:var(--cardShadow,0 8px 24px rgba(0,0,0,.06));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease;
  height:100%;
}
#tiers .listing-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 32px rgba(0,0,0,.1);
}

/* Titles & price */
#tiers .listing-title{
  font-family:"Chelsea Market",serif;
  font-size:2rem;
  color:var(--headingColor,#e32b68);
  margin:0 0 .5rem 0;
}
#tiers .listing-price{
  font-size:1.75rem;
  font-weight:800;
  color:var(--primary,#41aacd);
  margin:0 0 1rem 0;
}
#tiers .listing-price span{ white-space:nowrap; }

/* Feature list with correct bullet hierarchy */
#tiers .listing-features{
  list-style-type: disc;
  margin:0 0 1.5rem;
  padding-left:1.25rem;
  color:var(--bodyTextColor,#444);
  line-height:1.6;
}
#tiers .listing-features > li { margin-bottom:.5rem; }
#tiers .listing-features ul{
  list-style-type: circle;
  margin-left:1.25rem;
}
#tiers .listing-features ul ul{
  list-style-type: square;
  margin-left:1.25rem;
}

/* Body text & note */
#tiers .listing-desc{ margin:0 0 1.25rem; }
#tiers .listing-note{ margin:.5rem 0 1.25rem; }

/* Button */
#tiers .listing-btn{
  align-self:flex-start;
  background:var(--secondary,#e52a6b);
  color:#fff;
  font-weight:700;
  padding:.75rem 1.5rem;
  border-radius:999px;
  text-decoration:none;
  transition:background .3s ease;
  margin-top:auto;
}
#tiers .listing-btn:hover{ background:var(--buttonColorHover,#e07a7c); }

/* ============================
   Additional Advertising Options
   ============================ */
#addons { padding: 3rem 1rem; }
#addons .addons-container{
  max-width:1100px;
  margin:0 auto;
}

#addons .addons-title{
  font-family:"Chelsea Market",serif;
  font-size:clamp(2.2rem,4vw,3rem);
  color:#41AACD;
  margin:0 0 1rem 0;
}
#addons .addons-intro{
  font-size:1.1rem;
  line-height:1.7;
  margin:0 0 2rem 0;
  color:var(--bodyTextColor,#333);
  max-width:58rem;
}

#addons .addon{ margin:0 0 2.5rem 0; }
#addons .addon-heading{
  font-family:"Chelsea Market",serif;
  font-size:clamp(1.6rem,3vw,2.25rem);
  color:#41AACD;
  margin:0 0 .75rem 0;
}

#addons .addon-list{
  list-style:disc;
  padding-left:1.25rem;
  line-height:1.65;
  color:var(--bodyTextColor,#333);
}
#addons .addon-list ul{ list-style:circle; margin-left:1.25rem; }
#addons .addon-list ul ul{ list-style:square; }

#addons .addon-steps{
  padding-left:1.25rem;
  line-height:1.7;
}
#addons .addon-steps ul{ list-style:circle; margin-left:1.25rem; }

#addons .inquiry-btn{
  display:inline-block;
  background:#41aacd;
  color:#fff;
  font-weight:700;
  padding:.75rem 1.5rem;
  border-radius:999px;
  text-decoration:none;
  transition:opacity .3s ease;
  margin-top: 2rem
}
#addons .inquiry-btn:hover{ opacity:.85; }

/* === Floating Circles on the Right === */
.decorative-bg {
    position: relative;
    overflow: hidden;
}

.floating-circles {
    position: absolute;
    top: 50px;
    right: 0;
    width: 400px;
    height: 600px;
    pointer-events: none;
    z-index: 0;
}

.floating-circles .circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.35;
    animation: floaty 10s ease-in-out infinite alternate;
}

/* Circle colors, sizes, positions */
.circle-yellow { width: 200px; height: 200px; background: radial-gradient(circle, #fff59d, #fbc02d); top: 300px; right: 200px; animation-delay: 0s; }
.circle-pink   { width: 150px; height: 150px; background: radial-gradient(circle, #f8bbd0, #f48fb1); top: 600px; right: 350px; animation-delay: 3s; }
.circle-blue   { width: 100px; height: 100px; background: radial-gradient(circle, #b3e5fc, #81d4fa); top: 800px; right: 250px; animation-delay: 6s; }
.circle-purple { width: 130px; height: 130px; background: radial-gradient(circle, #c8e6c9, #81c784); top: 1000px; right: 450px; animation-delay: 9s; }
.circle-yellow2 { width: 200px; height: 200px; background: radial-gradient(circle, #fff59d, #fbc02d); top: 1300px; right: 200px; animation-delay: 0s; }
.circle-pink2   { width: 150px; height: 150px; background: radial-gradient(circle, #f8bbd0, #f48fb1); top: 1600px; right: 350px; animation-delay: 3s; }
.circle-blue2   { width: 100px; height: 100px; background: radial-gradient(circle, #b3e5fc, #81d4fa); top: 1800px; right: 250px; animation-delay: 6s; }
.circle-purple2 { width: 130px; height: 130px; background: radial-gradient(circle, #c8e6c9, #81c784); top: 2000px; right: 450px; animation-delay: 9s; }

.floating-circles .circle-yellow   { animation: floaty 8s ease-in-out infinite alternate; animation-delay: 0s; }
.floating-circles .circle-pink     { animation: floaty 9s ease-in-out infinite alternate; animation-delay: 2s; }
.floating-circles .circle-blue     { animation: floaty 6s ease-in-out infinite alternate; animation-delay: 4s; }
.floating-circles .circle-purple   { animation: floaty 7s ease-in-out infinite alternate; animation-delay: 1s; }
.floating-circles .circle-yellow2  { animation: floaty 9s ease-in-out infinite alternate; animation-delay: 3s; }
.floating-circles .circle-pink2    { animation: floaty 6.5s ease-in-out infinite alternate; animation-delay: 0.5s; }
.floating-circles .circle-blue2    { animation: floaty 10s ease-in-out infinite alternate; animation-delay: 2.5s; }
.floating-circles .circle-purple2  { animation: floaty 8.5s ease-in-out infinite alternate; animation-delay: 1.5s; }

@keyframes floaty {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-10px, -20px) scale(1.05); }
    100% { transform: translate(10px, 20px) scale(0.95); }
}