/* ==========================================================================
   RaconCodes – Pricing cards (final override, load LAST)
   One clean layout for desktop + mobile. No overlap, no hidden items.
   ========================================================================== */
html body #plans .plan-list{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:22px !important;align-items:stretch !important;
  width:min(1100px,100%) !important;max-width:none !important;margin:40px auto 0 !important;padding:0 20px !important;
  flex-direction:initial !important;
}
html body #plans .plan-list .plan-row{
  position:relative !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;
  grid-template-columns:none !important;height:auto !important;min-height:0 !important;width:auto !important;
  margin:0 !important;padding:22px 20px 18px !important;gap:0 !important;
  overflow:hidden !important;transform:none !important;order:0 !important;
  border-radius:20px !important;border:1px solid rgb(255 255 255 / .16) !important;
  background:linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 255 255 / .02)),#1b0a2c !important;
  box-shadow:0 14px 34px rgb(0 0 0 / .35) !important;color:#f3e9ff !important;
  transition:border-color .25s,box-shadow .25s !important;
}
html body #plans .plan-list .plan-row::before,
html body #plans .plan-list .plan-row::after,
html body #plans .plan-list .plan-row .plan-name::before,
html body #plans .plan-list .plan-row .plan-name::after,
html body #plans .plan-list .plan-row .plan-price::before,
html body #plans .plan-list .plan-row .plan-price::after{display:none !important;content:none !important}
html body #plans .plan-list .plan-row > *{position:static !important;grid-area:auto !important;inset:auto !important;transform:none !important;width:auto !important;max-width:100% !important;float:none !important}

html body #plans .plan-list .plan-row:hover,
html body #plans .plan-list .plan-row:focus-within,
html body #plans .plan-list .plan-row:active{transform:none !important;border-color:#ffb21b !important;box-shadow:0 14px 34px rgb(0 0 0 / .4),0 0 0 3px rgb(255 178 27 / .15) !important;background:linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 255 255 / .02)),#1b0a2c !important;color:#f3e9ff !important}
html body #plans .plan-list .plan-row.featured{border:2px solid #ffb21b !important;box-shadow:0 18px 40px rgb(0 0 0 / .45),0 0 0 4px rgb(255 178 27 / .12) !important}

/* header: name + badge */
html body #plans .plan-list .plan-row .plan-name{
  order:1 !important;display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;
  justify-content:space-between !important;gap:8px 10px !important;height:auto !important;margin:0 0 14px !important;padding:0 !important;background:none !important;border:0 !important;
}
html body #plans .plan-list .plan-row .plan-name img{display:none !important}
html body #plans .plan-list .plan-row .plan-name strong{
  flex:1 1 auto !important;min-width:0 !important;margin:0 !important;padding:0 !important;
  font:800 19px/1.2 var(--f-head,inherit) !important;color:#fff !important;text-shadow:none !important;text-transform:none !important;white-space:normal !important;overflow-wrap:anywhere;
}
html body #plans .plan-list .plan-row .plan-badge{
  flex:none !important;margin:0 !important;padding:5px 11px !important;border-radius:999px !important;
  background:linear-gradient(135deg,#ffd457,#ff9a2e) !important;color:#12031f !important;
  font:800 10.5px/1 var(--f-body,inherit) !important;letter-spacing:.08em !important;text-transform:uppercase !important;white-space:nowrap !important;
}

/* price */
html body #plans .plan-list .plan-row .plan-price{
  order:2 !important;display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:baseline !important;
  gap:4px 10px !important;height:auto !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;
}
html body #plans .plan-list .plan-row .plan-price strong{
  display:inline-flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:baseline !important;gap:8px !important;
  margin:0 !important;font:800 46px/1 var(--f-head,inherit) !important;letter-spacing:-.03em !important;color:#fff !important;-webkit-text-fill-color:#fff !important;background:none !important;
}
html body #plans .plan-list .plan-row .plan-price strong span{display:inline !important;margin:0 !important;font:800 14px/1 var(--f-body,inherit) !important;letter-spacing:.1em !important;color:#ffd457 !important;-webkit-text-fill-color:#ffd457 !important}
html body #plans .plan-list .plan-row .plan-price small{
  display:inline-block !important;margin:0 !important;padding:4px 10px !important;border-radius:999px !important;
  background:rgb(255 255 255 / .1) !important;color:#d9c7ec !important;-webkit-text-fill-color:#d9c7ec !important;font:700 12px/1.2 var(--f-body,inherit) !important;
}
html body #plans .plan-list .plan-row .plan-mo{
  order:3 !important;display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:6px 10px !important;
  margin:10px 0 0 !important;padding:0 0 14px !important;background:none !important;border:0 !important;border-bottom:1px solid rgb(255 255 255 / .12) !important;
  font:800 14px/1.3 var(--f-body,inherit) !important;color:#7dffb8 !important;
}
html body #plans .plan-list .plan-row .plan-save{
  display:inline-block !important;margin:0 !important;padding:3px 10px !important;border-radius:999px !important;font-style:normal !important;
  background:rgb(37 211 102 / .14) !important;color:#7dffb8 !important;border:1px solid rgb(125 255 184 / .45) !important;font:800 11.5px/1.2 var(--f-body,inherit) !important;
}

/* features – ALL items visible, one per line, nothing overlapping */
html body #plans .plan-list .plan-row ul{
  order:4 !important;display:flex !important;flex-direction:column !important;gap:0 !important;flex:1 1 auto !important;
  list-style:none !important;margin:14px 0 18px !important;padding:0 !important;border:0 !important;
}
html body #plans .plan-list .plan-row ul li{
  display:flex !important;align-items:flex-start !important;gap:10px !important;width:100% !important;
  margin:0 !important;padding:6px 0 !important;min-height:0 !important;animation:none !important;
  font:600 14px/1.35 var(--f-body,inherit) !important;color:#eadcf8 !important;
}
html body #plans .plan-list .plan-row ul li:nth-child(n){display:flex !important}
html body #plans .plan-list .plan-row ul li svg,
html body #plans .plan-list .plan-row ul li i{flex:none !important;width:18px !important;height:18px !important;margin-top:1px !important;padding:3px !important;border-radius:50% !important;background:rgb(255 212 87 / .16) !important;color:#ffd457 !important;stroke:#ffd457 !important}

/* buttons */
html body #plans .plan-list .plan-row > a:not(.plan-trial){
  order:5 !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;
  width:100% !important;min-height:52px !important;margin:0 !important;padding:0 18px !important;border:0 !important;border-radius:12px !important;clip-path:none !important;
  background:linear-gradient(135deg,#ffd457,#ff9a2e) !important;color:#12031f !important;-webkit-text-fill-color:#12031f !important;
  font:800 14px/1 var(--f-body,inherit) !important;letter-spacing:.06em !important;text-transform:uppercase !important;box-shadow:0 10px 22px rgb(255 154 46 / .28) !important;
}
html body #plans .plan-list .plan-row.featured > a:not(.plan-trial){background:linear-gradient(135deg,#ff2fa0,#ff7a1a) !important;color:#fff !important;-webkit-text-fill-color:#fff !important;box-shadow:0 10px 22px rgb(255 47 160 / .35) !important}
html body #plans .plan-list .plan-row > a:not(.plan-trial):hover{transform:none !important;filter:brightness(1.08)}
html body #plans .plan-list .plan-row > a.plan-trial{
  order:6 !important;display:block !important;width:100% !important;min-height:0 !important;height:auto !important;margin:12px 0 0 !important;padding:0 !important;
  background:none !important;border:0 !important;box-shadow:none !important;clip-path:none !important;text-align:center !important;
  font:700 13px/1.3 var(--f-body,inherit) !important;letter-spacing:0 !important;text-transform:none !important;color:#ffb3dc !important;-webkit-text-fill-color:#ffb3dc !important;text-decoration:underline;text-underline-offset:4px;
}

/* left-align everything inside the card */
html body #plans .plan-list .plan-row{text-align:left !important}
html body #plans .plan-list .plan-row .plan-name strong{text-align:left !important}
html body #plans .plan-list .plan-row ul{align-items:stretch !important}

/* Cards fill the width. 3 across on wide screens, 1 full-width column on phones */
html body #plans .plan-list{max-width:1100px !important;width:100% !important;box-sizing:border-box !important}
@media (max-width:759px){
  html body #plans .plan-list{grid-template-columns:1fr !important;max-width:none !important;gap:18px !important;padding:0 14px !important}
}
@media (min-width:760px) and (max-width:1000px){
  html body #plans .plan-list{grid-template-columns:repeat(3,minmax(0,1fr)) !important;max-width:none !important;gap:14px !important;padding:0 16px !important}
  html body #plans .plan-list .plan-row{padding:18px 14px 14px !important}
  html body #plans .plan-list .plan-row .plan-price strong{font-size:36px !important}
  html body #plans .plan-list .plan-row .plan-name strong{font-size:16px !important}
  html body #plans .plan-list .plan-row ul li{font-size:12.5px !important}
}
@media (max-width:480px){
  html body #plans .plan-list .plan-row{padding:20px 16px 16px !important}
  html body #plans .plan-list .plan-row .plan-price strong{font-size:42px !important}
  html body #plans .plan-list .plan-row .plan-name strong{font-size:18px !important}
}
html[dir="rtl"] #plans .plan-list .plan-row{text-align:right}

/* Section heading: keep the "Premium" P capital everywhere */
.sv-wall-head h2,.sv-wall-head h2 *{text-transform:none !important}
.sv-wall-head h2::first-letter{text-transform:none}

/* FAQ block (SEO) */
.rc-faq{padding:48px 20px;background:#12031f}
.rc-faq-in{width:min(820px,100%);margin:0 auto}
.rc-faq h2{margin:0 0 20px;font:800 clamp(24px,4vw,34px)/1.15 var(--f-head,inherit);color:#f8efdb}
.rc-faq h2 em{font-style:normal;color:#f5b21b}
.rc-faq details{border:1px solid rgb(255 255 255 / .14);border-radius:14px;padding:14px 16px;margin:0 0 10px;background:rgb(255 255 255 / .04)}
.rc-faq summary{cursor:pointer;font-weight:700;color:#fff}
.rc-faq p{margin:10px 0 0;color:#cbbfdc;line-height:1.6}

/* badge sits on its own line ABOVE the name -> never overlaps the title */
html body #plans .plan-list .plan-row .plan-name{flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;gap:8px !important}
html body #plans .plan-list .plan-row .plan-name .plan-badge{order:-1 !important;align-self:flex-start !important;position:static !important}
html body #plans .plan-list .plan-row .plan-name strong{order:0 !important;flex:none !important;width:100% !important}
/* keep card heights equal when only some cards have a badge */
html body #plans .plan-list .plan-row:not(:has(.plan-badge)) .plan-name::before{content:"" !important;display:block !important;height:21px}

/* hero eyebrow must fit on one line */
.hero-content .eyebrow,.hero-content p.eyebrow{white-space:normal !important;max-width:100% !important;font-size:12px !important;letter-spacing:.08em !important;line-height:1.35 !important;padding:9px 16px !important;box-sizing:border-box !important}
