/* Section A: discussion concepts (3 layouts) + Section B: per-page motif bands */
.dcsec .wrap{max-width:1100px}
.dc-head{text-align:center;max-width:840px;margin:0 auto 2.4rem}
.dc-head h2{font-size:clamp(1.55rem,2.6vw,2.2rem)}
.dc-head .orn{color:var(--gold)}
.dc-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.2rem,3vw,2.6rem);align-items:center}
.dc--R .dc-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.dc--R .dc-list{order:2}
.dc--B .dc-grid{grid-template-columns:1fr}.dc--B .dc-stage{order:-1;width:100%;max-width:560px;margin-inline:auto}
.dc--B .dc-list{grid-template-columns:repeat(4,minmax(0,1fr))}
.dc-list{display:grid;gap:.9rem;list-style:none;margin:0;padding:0}
.dc-list li{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border-radius:18px;border:1px solid rgba(224,179,79,.26);background:rgba(255,255,255,.045);cursor:pointer;overflow:hidden;color:rgba(255,246,228,.82);font-size:.98rem;line-height:1.4;transition:border-color .4s,background .4s,color .4s,transform .4s var(--ease)}
.dc-list li:hover{border-color:var(--gold)}
.dc-list li>i{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(224,179,79,.5);transition:all .4s var(--ease)}
.dc-list li.on{color:#fff;border-color:var(--gold);background:linear-gradient(120deg,rgba(224,179,79,.2),rgba(255,255,255,.04));transform:translateX(6px)}
.dc--R .dc-list li.on{transform:translateX(-6px)}.dc--B .dc-list li.on{transform:translateY(-5px)}
.dc-list li.on>i{background:linear-gradient(135deg,var(--gold2),var(--gold3));color:var(--m9);border-color:transparent;transform:rotate(8deg) scale(1.05)}
.dc-list .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold3),var(--gold2))}
.dc-list li.on .bar{animation:dcbar var(--dur,5s) linear forwards}
.dc.pause li.on .bar{animation-play-state:paused}
@keyframes dcbar{to{width:100%}}
.dc--B .dc-list li{flex-direction:column;text-align:center;justify-content:flex-start;padding:1.1rem .8rem}
.dc-stage{position:relative;aspect-ratio:4/3;border-radius:26px;border:1px solid rgba(224,179,79,.35);overflow:hidden;background:linear-gradient(rgba(224,179,79,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(224,179,79,.07) 1px,transparent 1px) 0 0/28px 28px,radial-gradient(90% 90% at 30% 8%,rgba(138,34,54,.6),rgba(26,5,8,.75))}
.dc-stage svg{position:absolute;inset:0;width:100%;height:100%}
.dc-stage .sc{opacity:0;transform:scale(.93);transform-box:fill-box;transform-origin:center;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.dc-stage .sc.on{opacity:1;transform:none}
.dc-stage .s{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dc-stage .f{fill:rgba(224,179,79,.16);stroke:var(--gold);stroke-width:2;stroke-linejoin:round}
.dc-stage .c{fill:var(--gold2)}
.dc-stage .dash{stroke-dasharray:5 7}
.dc-stage .d{stroke-dasharray:1;stroke-dashoffset:1}
.dc-stage .sc.on .d{animation:dcd 1.5s var(--ease) forwards}
@keyframes dcd{to{stroke-dashoffset:0}}
.dc-stage .pu{animation:dcp 2.4s ease-in-out infinite}
@keyframes dcp{50%{opacity:.4}}
.dc-stage .rot{transform-origin:200px 150px;animation:spin 22s linear infinite}
.dc-stage .rot2{animation-duration:34s;animation-direction:reverse}
.dc-stage .sway{transform-origin:200px 125px;animation:dcs 3s ease-in-out infinite alternate}
@keyframes dcs{from{transform:rotate(-55deg)}to{transform:rotate(55deg)}}
.dc-stage .gr{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.dc-stage .sc.on .gr{animation:dcg 1.2s var(--ease) forwards;animation-delay:calc(var(--k)*.15s)}
@keyframes dcg{to{transform:scaleY(1)}}
.dc>.btn-row{justify-content:center}.dc>.disc{max-width:820px;margin-inline:auto}
/* Section B */
.ovx .overview{position:relative;overflow:hidden;isolation:isolate}
.ovx .overview::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-size:var(--sz,46px);animation:ovd 22s linear infinite}
@keyframes ovd{to{background-position:var(--sz,46px) var(--sz,46px)}}
/* .ovx[data-motif=love] .overview::before{--sz:90px;background-image:radial-gradient(circle at 30% 50%,transparent 28px,rgba(224,179,79,.28) 29px,transparent 31px),radial-gradient(circle at 70% 50%,transparent 28px,rgba(224,179,79,.28) 29px,transparent 31px)} */
.ovx[data-motif=marriage] .overview::before{--sz:56px;background-image:linear-gradient(45deg,rgba(224,179,79,.22) 1px,transparent 1px),linear-gradient(-45deg,rgba(224,179,79,.22) 1px,transparent 1px)}
.ovx[data-motif=divorce] .overview::before{--sz:70px;background-image:repeating-linear-gradient(115deg,transparent 0 24px,rgba(224,179,79,.2) 24px 25px)}
.ovx[data-motif=kundli] .overview::before{--sz:0px;background-image:repeating-radial-gradient(circle at 12% 50%,transparent 0 26px,rgba(224,179,79,.2) 26px 27px);animation:none}
.ovx[data-motif=vastu] .overview::before{--sz:40px;background-image:linear-gradient(rgba(224,179,79,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(224,179,79,.2) 1px,transparent 1px)}
/* .ovx[data-motif=career] .overview::before{--sz:60px;background-image:linear-gradient(135deg,transparent 48%,rgba(224,179,79,.28) 49% 51%,transparent 52%)} */
.ovx .overview .medal{animation:ovf 5s ease-in-out infinite}
@keyframes ovf{50%{transform:translateY(-7px)}}
@media(max-width:900px){
 .dc-grid,.dc--R .dc-grid{grid-template-columns:1fr}.dc-stage{order:-1}.dc--R .dc-list{order:0}
 .dc--B .dc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dc-list li.on,.dc--R .dc-list li.on{transform:none}
}
@media(prefers-reduced-motion:reduce){.dc-stage *,.ovx *,.ovx .overview::before{animation:none!important}.dc-stage .d{stroke-dashoffset:0}.dc-stage .gr{transform:none}}

/* ===== v2: journey line, done states, tilt, dust, sweep, compass dial ===== */
.dc--J .dc-list{position:relative;isolation:isolate}
.dc--J .dc-list::before,.dc--J .dc-list::after{content:"";position:absolute;left:calc(1.15rem + 21px);top:36px;bottom:36px;width:2px;z-index:0;border-radius:2px}
.dc--J .dc-list::before{background:rgba(224,179,79,.22)}
.dc--J .dc-list::after{background:linear-gradient(var(--gold3),var(--gold2));transform-origin:top;transform:scaleY(var(--prog,0));transition:transform 1.1s var(--ease);box-shadow:0 0 12px rgba(243,217,139,.6)}
.dc--J:not(.dc--B) .dc-list li{z-index:1;background-color:#2b0d14}
.dc--J:not(.dc--B) .dc-list li.on{background-image:linear-gradient(120deg,rgba(224,179,79,.22),rgba(255,255,255,.03))}
.dc--J:not(.dc--B) .dc-list li>i{position:relative;background-color:#2b0d14}
.dc--J:not(.dc--B) .dc-list li.done>i{border-color:var(--gold);background-color:#46202a}
.dc--build li.done>i::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.6rem;background:var(--gold2);color:var(--m9);animation:dcpop .5s var(--ease)}
@keyframes dcpop{from{transform:scale(0)}}
.dc-stage{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease-out,border-color .4s;box-shadow:0 30px 70px -30px rgba(0,0,0,.7),inset 0 0 60px rgba(224,179,79,.06)}
.dc-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.dc-dots span{width:6px;height:6px;border-radius:6px;background:rgba(224,179,79,.35);transition:all .5s var(--ease)}
.dc-dots span.on{width:22px;background:var(--gold2)}
.dc--build .dc-stage .sc{transform:none;transition:opacity .7s var(--ease)}
.dc-stage .sc.on .d:nth-child(2){animation-delay:.12s}.dc-stage .sc.on .d:nth-child(3){animation-delay:.24s}.dc-stage .sc.on .d:nth-child(4){animation-delay:.36s}.dc-stage .sc.on .d:nth-child(5){animation-delay:.48s}.dc-stage .sc.on .d:nth-child(6){animation-delay:.6s}
.dc-stage .lbl{fill:var(--gold2);font:600 13px Cinzel,serif;letter-spacing:.05em}
.dc-stage .nd2{transform-origin:200px 150px;transition:transform 1.5s cubic-bezier(.34,1.4,.5,1)}
.dc-stage .wedge{fill:rgba(224,179,79,.16);stroke:rgba(224,179,79,.5);stroke-width:1}
/* FAQ tabs inside pages */
.faqx .opts.tabs{margin-bottom:2rem!important}
.faqx [data-pane]{animation:dcfade .55s var(--ease)}
@keyframes dcfade{from{opacity:0;transform:translateY(12px)}}
@media(max-width:900px){.dc--J .dc-list::before,.dc--J .dc-list::after{display:none}.dc-stage{transform:none!important}}
@media(prefers-reduced-motion:reduce){.faqx [data-pane]{animation:none!important}.dc-stage{transform:none}}

/* ===== v3: "Graha Path" layout (dc--O) - diagram on the left, vertical list on the right ===== */
@counter-style dev-num{system:numeric;symbols:"०" "१" "२" "३" "४" "५" "६" "७" "८" "९"}
.dc--O .dc-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.4rem,3.5vw,3.2rem);align-items:center}
.dc--O .dc-stage{order:0;width:100%;max-width:none;margin:0}
.dc--O .dc-list{order:1;grid-template-columns:1fr;gap:1rem;position:relative;isolation:isolate;padding-left:2.3rem;counter-reset:gp}
/* thread + glowing fill that follows the active item */
.dc--O .dc-list::before,.dc--O .dc-list::after{content:"";position:absolute;left:9px;top:var(--t0,30px);height:calc(var(--t1,200px) - var(--t0,30px));width:2px;border-radius:2px;z-index:0}
.dc--O .dc-list::before{background:repeating-linear-gradient(rgba(224,179,79,.4) 0 5px,transparent 5px 10px)}
.dc--O .dc-list::after{background:linear-gradient(var(--gold3),var(--gold2));transform-origin:top;transform:scaleY(var(--prog,0));transition:transform 1.1s var(--ease);box-shadow:0 0 14px rgba(243,217,139,.7)}
/* each item is a "house" with a diamond node on the thread */
.dc--O .dc-list li{counter-increment:gp;z-index:1;padding:1rem 3.4rem 1rem 1.05rem;background-color:#2b0d14;border-radius:18px 18px 18px 6px;transform:none}
.dc--O .dc-list li::before{content:"";position:absolute;left:calc(-2.3rem + 9px - 6px + 1px);top:50%;width:12px;height:12px;margin-top:-6px;transform:rotate(45deg);border:2px solid var(--gold3);background:#2b0d14;z-index:2;transition:all .5s var(--ease)}
.dc--O .dc-list li.done::before{background:var(--gold3);border-color:var(--gold3)}
.dc--O .dc-list li.on::before{background:var(--gold2);border-color:var(--gold2);transform:rotate(225deg) scale(1.35);box-shadow:0 0 0 5px rgba(243,217,139,.18),0 0 16px rgba(243,217,139,.9)}
/* connector tick from node to card */
.dc--O .dc-list li::after{content:counter(gp,dev-num);position:absolute;right:1rem;top:50%;transform:translateY(-52%);font:700 2.1rem/1 "Noto Serif Devanagari","Cinzel",serif;color:rgba(224,179,79,.16);pointer-events:none;transition:color .5s,transform .5s var(--ease)}
.dc--O .dc-list li.on::after{color:rgba(243,217,139,.55);transform:translateY(-52%) scale(1.12)}
.dc--O .dc-list li.on{background-color:#3a1520;background-image:linear-gradient(120deg,rgba(224,179,79,.24),rgba(255,255,255,.03));transform:translateX(8px);box-shadow:0 18px 40px -22px rgba(0,0,0,.8),0 0 0 1px rgba(243,217,139,.35)}
.dc--O .dc-list li.done>i{border-color:var(--gold)}
.dc--O .dc-list li>i{background-color:#2b0d14}
.dc--O .dc-list li.on>i{background-color:transparent}
/* stage: corner brackets + chapter number */
.dc--O .dc-stage::before{content:"";position:absolute;inset:12px;z-index:2;pointer-events:none;border-radius:16px;opacity:.85;
 background:
 linear-gradient(var(--gold2),var(--gold2)) 0 0/26px 2px no-repeat,linear-gradient(var(--gold2),var(--gold2)) 0 0/2px 26px no-repeat,
 linear-gradient(var(--gold2),var(--gold2)) 100% 0/26px 2px no-repeat,linear-gradient(var(--gold2),var(--gold2)) 100% 0/2px 26px no-repeat,
 linear-gradient(var(--gold2),var(--gold2)) 0 100%/26px 2px no-repeat,linear-gradient(var(--gold2),var(--gold2)) 0 100%/2px 26px no-repeat,
 linear-gradient(var(--gold2),var(--gold2)) 100% 100%/26px 2px no-repeat,linear-gradient(var(--gold2),var(--gold2)) 100% 100%/2px 26px no-repeat}
.dc-no{position:absolute;left:24px;top:20px;z-index:3;pointer-events:none;font:700 .95rem "Noto Serif Devanagari","Cinzel",serif;letter-spacing:.12em;color:var(--gold2);text-shadow:0 0 12px rgba(243,217,139,.5)}
/* tablet: still side by side, just tighter */
@media(max-width:900px){
 .dc--O .dc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem}
 .dc--O .dc-list{padding-left:2rem;gap:.7rem}
 .dc--O .dc-list li{padding:.8rem 2.6rem .8rem .8rem;font-size:.86rem;gap:.7rem}
 .dc--O .dc-list li>i{width:36px;height:36px;border-radius:12px}
 .dc--O .dc-list li::after{font-size:1.5rem;right:.7rem}
 .dc--O .dc-list li::before{left:calc(-2rem + 9px - 5px)}
 .dc--O .dc-list li.on{transform:translateX(4px)}
 .dc--O .dc-stage{order:0}
 .dc--O .dc-list::before,.dc--O .dc-list::after{display:block}
}
/* phone: diagram on top, vertical list underneath */
@media(max-width:640px){
 .dc--O .dc-grid{grid-template-columns:1fr}
 .dc--O .dc-list{padding-left:2.1rem}
 .dc--O .dc-list li{font-size:.92rem}
 .dc--O .dc-list li.on{transform:translateX(3px)}
}
/* let the thread nodes sit outside each card */
.dc--O .dc-list li{overflow:visible}
.dc--O .dc-list .bar{border-radius:0 0 0 6px;max-width:100%}
.dc--O .dc-list li.on .bar{border-bottom-right-radius:18px}
.dc--O .dc-list li.on::before{transform:translateX(-8px) rotate(225deg) scale(1.35)}
@media(max-width:900px){.dc--O .dc-list li.on::before{transform:translateX(-4px) rotate(225deg) scale(1.35)}}
@media(max-width:640px){.dc--O .dc-list li.on::before{transform:translateX(-3px) rotate(225deg) scale(1.35)}}