/* How to Use - Cloaking Ads guided demo (premium dark-purple). */
/* animated typed walkthrough (#caAnim): reuses the .hm-* window / input / caret styles of the LP Generator demo */
.cad-anim { max-width: 980px; margin: 0 auto 22px; }
.cad-a-sec { margin: 4px 0 8px; font-size: 12.5px; font-weight: 700; color: #F8F8FC; }
.cad-a-two { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.cad-a-rule { display: grid; grid-template-columns: 1fr .8fr 1.6fr; gap: 10px; }
.cad-anim .hm-caret { display: none; }
.cad-anim .hm-input.is-act { border-color: #A855F7; box-shadow: 0 0 0 3px rgba(168, 85, 247, .18); }
.cad-anim .hm-input.is-act .hm-caret { display: inline-block; }
.cad-anim .hm-input { min-width: 0; } .cad-anim .hm-t { overflow-wrap: anywhere; }
.cad-a-card, .cad-a-test { display: none; border: 1px solid rgba(167, 139, 250, .4); border-radius: 12px; padding: 12px 14px; background: rgba(124, 58, 237, .08); margin-bottom: 12px; }
.cad-a-card.is-on, .cad-a-test.is-on { display: block; animation: cadAPop .45s; }
.cad-a-test { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); }
.cad-a-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #F8F8FC; }
.cad-a-ok { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #86efac; background: rgba(34, 197, 94, .14); border: 1px solid rgba(34, 197, 94, .4); }
.cad-a-url { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .35); }
.cad-a-url code { flex: 1; min-width: 0; font-size: 12px; color: #e9d5ff; overflow-wrap: anywhere; }
.cad-a-copy { flex: none; padding: 3px 10px; border-radius: 8px; font-size: 11.5px; color: #c4b5fd; border: 1px solid rgba(167, 139, 250, .45); transition: all .25s; }
.cad-a-copy.is-done { color: #fff; background: #7C3AED; border-color: #A855F7; }
.cad-a-help { margin: 8px 0 0; font-size: 12px; color: #9696AD; line-height: 1.5; }
.cad-a-q { margin-top: 8px; font-size: 12px; color: #cbd5e1; }
.cad-a-meter { height: 6px; margin-top: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cad-a-meter span { display: block; height: 100%; width: 30%; border-radius: 999px; background: linear-gradient(90deg, #7C3AED, #A855F7); transition: width .5s ease; }
.cad-a-vis { display: none; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; padding: 8px 10px; margin-top: 6px; border-radius: 10px; font-size: 12px; color: #cbd5e1; background: rgba(255, 255, 255, .04); border-left: 3px solid rgba(255, 255, 255, .25); }
.cad-a-vis.is-on { display: flex; animation: cadAPop .4s; }
.cad-a-vis b { color: #F8F8FC; } .cad-a-vis.is-go { border-left-color: #A855F7; } .cad-a-vis.is-stay { border-left-color: #22c55e; }
@keyframes cadAPop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 640px) { .cad-a-two, .cad-a-rule { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cad-a-card.is-on, .cad-a-test.is-on, .cad-a-vis.is-on { animation: none; } }
.cad { max-width: 980px; margin: 0 auto; padding: 26px 26px 24px; border: 1px solid rgba(135, 56, 245, .28); border-radius: 24px; background: #101018; box-shadow: 0 30px 90px -45px rgba(135, 56, 245, .6); }
/* example screenshots slider (#caShots) */
.cas { max-width: 980px; margin: 22px auto 22px; padding: 22px 22px 18px; border: 1px solid rgba(135, 56, 245, .28); border-radius: 24px; background: #101018; box-shadow: 0 30px 90px -45px rgba(135, 56, 245, .6); }
.cas-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cas-view { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: #0b0b12; }
.cas-view { transition: height .35s ease; }
.cas-track { display: flex; align-items: flex-start; transition: transform .45s ease; }
.cas-slide { flex: 0 0 100%; min-width: 0; margin: 0; }
.cas-slide img { display: block; width: 100%; height: auto; background: #e8ecf5; }
.cas-slide figcaption { padding: 12px 16px 14px; font-size: 14px; line-height: 1.55; color: #cbd5e1; }
.cas-slide figcaption b { color: #F8F8FC; }
.cas-arrow { position: absolute; top: 38%; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(16, 16, 24, .78); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cas-arrow:hover, .cas-arrow:focus-visible { background: #7C3AED; border-color: #A855F7; outline: none; }
.cas-arrow.is-prev { left: 10px; } .cas-arrow.is-next { right: 10px; }
.cas-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.cas-dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .25); cursor: pointer; }
.cas-dots button.is-on { width: 26px; background: linear-gradient(90deg, #7C3AED, #A855F7); }
.cas-note { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: #9696AD; }
@media (max-width: 640px) { .cas { padding: 14px 12px 12px; border-radius: 18px; } .cas-arrow { width: 34px; height: 34px; } .cas-slide figcaption { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .cas-track { transition: none; } }
.cad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cad-kick { font-size: 13px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: #A855F7; }
.cad-safe { font-size: 13px; color: #9696AD; }
.cad-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 6px 0 12px; }
.cad-progress span { display: block; height: 100%; width: 14%; border-radius: 999px; background: linear-gradient(90deg, #7C3AED, #A855F7); transition: width .25s ease; }
.cad-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cad-chips button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: #171720; color: #9696AD; font: inherit; font-weight: 650; cursor: pointer; }
.cad-chips button.is-done { color: #c4b5fd; border-color: rgba(135, 56, 245, .45); }
.cad-chips button.is-on { background: linear-gradient(100deg, #6a2bf0, #a855f7); color: #fff; border-color: rgba(192, 132, 252, .75); }
.cad-title { margin: 0 0 6px; font-size: clamp(19px, 2.6vw, 24px); font-weight: 750; color: #F8F8FC; }
.cad-text { margin: 0 0 16px; color: #b9b9cf; font-size: 15.5px; line-height: 1.55; }
.cad-stage { display: grid; gap: 12px; }
.cad-card { border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: #171720; padding: 20px 22px; display: grid; gap: 14px; }
.cad-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: #F8F8FC; }
.cad-badge { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; border: 1px solid rgba(255, 255, 255, .15); color: #dcdce8; }
.cad-badge.is-ok { color: #6ee7b7; border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .1); }
.cad-badge.is-wait { color: #fcd34d; border-color: rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .1); }
.cad-price { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.cad-price small { font-size: 15px; font-weight: 500; color: #9696AD; }
.cad-list { margin: 0; padding-left: 20px; color: #dcdce8; display: grid; gap: 6px; }
.cad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; }
.cad-big { font-size: 19px; font-weight: 700; color: #F8F8FC; }
.cad-lbl { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #9696AD; margin-bottom: 4px; }
.cad-val { padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 12px; background: #0D0D15; color: #F8F8FC; font-size: 15.5px; overflow-wrap: anywhere; }
.cad-field { display: grid; gap: 4px; }
.cad-help { margin: 0; font-size: 13px; color: #8e8ea8; }
.cad-rule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cad-wide { grid-column: 1 / -1; }
.cad-meter { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cad-meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7C3AED, #A855F7); transition: width .25s ease; }
.cad-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cad-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(100deg, #7C3AED, #A855F7); color: #fff; font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; }
.cad-btn.is-ghost { background: transparent; border-color: rgba(135, 56, 245, .6); color: #d8b4fe; cursor: default; }
button.cad-btn.is-ghost { cursor: pointer; }
.cad-btn:disabled { opacity: .45; cursor: not-allowed; }
.cad-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cad-url code { padding: 8px 12px; border-radius: 10px; background: #0D0D15; color: #e9d5ff; overflow-wrap: anywhere; }
.cad-alert { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .1); color: #fecaca; font-size: 14.5px; }
.cad-note { margin: 0; font-size: 13.5px; color: #9696AD; }
.cad-time { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cad-time li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .15); color: #6f6f88; }
.cad-time li.is-on { border-style: solid; color: #F8F8FC; background: rgba(135, 56, 245, .1); border-color: rgba(135, 56, 245, .5); }
.cad-time li.is-on.is-off { background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .45); }
.cad-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.cad-count { color: #9696AD; font-size: 14px; }
.cad-nav .cad-btn.is-ghost { cursor: pointer; }
@media (max-width: 640px) { .cad { padding: 18px 14px; border-radius: 18px; } .cad-rule { grid-template-columns: 1fr; } .cad-card { padding: 16px; } .cad-chips button { width: 34px; height: 34px; } }

/* home pricing: three credit packs + the Cloaking Ads plan in one row */
.hm-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .hm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hm-plans { grid-template-columns: 1fr; } }