/* ==========================================================================
   Pemetaan Kesadaran Diri — SK Academy
   Menggunakan design system existing (var di style.css :root)
   ========================================================================== */

/* ---------- Hero ---------- */
.pemetaan-hero{
    background:linear-gradient(160deg,var(--primary) 0%,var(--primary-light) 100%);
    color:var(--white);
    padding:90px 0 80px;
    text-align:center;
}

.pemetaan-hero-inner{
    max-width:720px;
    margin:0 auto;
}

.pemetaan-badge{
    display:inline-block;
    border:1px solid var(--gold);
    color:var(--gold);
    border-radius:999px;
    padding:6px 20px;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:22px;
}

.pemetaan-title{
    font-size:clamp(30px,5vw,52px);
    font-weight:700;
    margin-bottom:18px;
    color:var(--white);
}

.pemetaan-subtitle{
    font-size:17px;
    color:rgba(255,255,255,.82);
    margin-bottom:32px;
}

.pemetaan-title-accent{
    color:var(--gold);
}

.pemetaan-hero-actions{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:26px;
}

.pemetaan-trust{
    display:flex;
    gap:10px 26px;
    justify-content:center;
    flex-wrap:wrap;
    list-style:none;
    margin:0 0 20px;
    padding:0;
    font-size:13.5px;
    color:rgba(255,255,255,.75);
}

.pemetaan-trust li{
    white-space:nowrap;
}

.pemetaan-disclaimer{
    font-size:12.5px;
    color:rgba(255,255,255,.55);
    font-style:italic;
    max-width:520px;
    margin:0 auto;
    line-height:1.6;
}

/* ---------- Method selector ---------- */
.pemetaan-methods{
    padding:70px 0 20px;
    background:var(--cream);
}

.pemetaan-methods h2{
    color:var(--primary);
    font-size:clamp(24px,3.4vw,34px);
    margin-bottom:14px;
    text-align:center;
}

.method-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:20px;
    margin-top:36px;
}

.method-card{
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-radius:var(--radius,16px);
    padding:28px 24px;
    text-align:center;
    box-shadow:var(--shadow-sm,0 4px 12px rgba(0,0,0,.05));
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
    display:flex;
    flex-direction:column;
}

.method-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
    box-shadow:0 12px 28px rgba(200,169,107,.18);
}

.method-icon{
    font-size:30px;
    color:var(--gold);
    margin-bottom:10px;
}

.method-card h3{
    color:var(--primary);
    font-size:19px;
    margin:0 0 4px;
}

.method-tagline{
    color:var(--gold);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin:0 0 14px;
}

.method-list{
    list-style:none;
    margin:0 0 20px;
    padding:0;
    text-align:left;
    flex:1;
}

.method-list li{
    font-size:13.5px;
    color:var(--text-soft);
    padding:4px 0 4px 18px;
    position:relative;
}

.method-list li::before{
    content:'·';
    color:var(--gold);
    font-weight:700;
    position:absolute;
    left:4px;
}

.method-cta{
    display:inline-block;
    color:var(--primary);
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    border:1.5px solid var(--primary);
    border-radius:999px;
    padding:9px 20px;
    transition:background .25s,color .25s;
}

.method-cta:hover{
    background:var(--primary);
    color:var(--white);
}

/* ---------- Intro ---------- */
.pemetaan-intro{
    padding:70px 0 10px;
    text-align:center;
}

.pemetaan-intro h2,
.pemetaan-form-section h2,
.pemetaan-results h2,
.pemetaan-reflection h2{
    color:var(--primary);
    font-size:clamp(24px,3.4vw,34px);
    margin-bottom:14px;
    text-align:center;
}

.section-intro{
    max-width:640px;
    margin:0 auto;
    color:var(--text-soft);
    text-align:center;
}

/* ---------- Form ---------- */
.pemetaan-form-section{
    padding:50px 0 80px;
}

.pemetaan-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    max-width:860px;
    margin:30px auto 0;
}

.form-field label{
    display:block;
    font-weight:600;
    font-size:14px;
    color:var(--primary);
    margin-bottom:8px;
}

.form-field .optional{
    color:var(--text-soft);
    font-weight:400;
    font-size:12px;
}

.form-field .required{
    color:#c0392b;
}

.form-field input,
.form-field select{
    width:100%;
    height:54px;
    border:1px solid var(--border,#e5e7eb);
    border-radius:var(--radius,16px);
    padding:0 18px;
    font-size:15px;
    font-family:inherit;
    background:var(--white);
    color:var(--text);
    transition:border-color .25s,box-shadow .25s;
}

.form-field input:focus,
.form-field select:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(200,169,107,.22);
}

.field-note{
    font-size:12px;
    color:var(--text-soft);
    margin-top:6px;
}

.field-error{
    color:#c0392b;
    font-size:13px;
    margin-top:6px;
}

/* ---------- Calculator selection ---------- */
.pemetaan-calculators{
    border:none;
    max-width:860px;
    margin:30px auto 0;
    padding:0;
}

.pemetaan-calculators legend{
    font-weight:600;
    color:var(--primary);
    font-size:15px;
    margin-bottom:14px;
}

.pemetaan-calculators{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.pemetaan-calculators legend{
    grid-column:1 / -1;
}

.calc-option{
    cursor:pointer;
}

.calc-option input{
    position:absolute;
    opacity:0;
}

.calc-card{
    display:block;
    border:2px solid var(--border,#e5e7eb);
    border-radius:var(--radius,16px);
    padding:18px;
    background:var(--white);
    transition:border-color .25s,box-shadow .25s;
}

.calc-card strong{
    display:block;
    color:var(--primary);
    margin-bottom:4px;
}

.calc-card small{
    color:var(--text-soft);
    font-size:12.5px;
    line-height:1.5;
    display:block;
}

.calc-option input:checked + .calc-card{
    border-color:var(--gold);
    box-shadow:0 6px 20px rgba(200,169,107,.25);
    background:#fbf7ef;
}

.calc-option input:focus-visible + .calc-card{
    outline:3px solid rgba(200,169,107,.45);
    outline-offset:2px;
}

.pemetaan-calculators .field-error{
    grid-column:1 / -1;
}

/* ---------- Actions / status ---------- */
.pemetaan-form-actions{
    max-width:860px;
    margin:28px auto 0;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.pemetaan-privacy-note{
    max-width:860px;
    margin:18px auto 0;
    font-size:13px;
    color:var(--text-soft);
}

.pemetaan-status{
    max-width:860px;
    margin:20px auto 0;
    padding:14px 20px;
    border-radius:var(--radius,16px);
    background:#eef4fb;
    color:var(--primary);
    font-size:14px;
}

.pemetaan-error{
    max-width:860px;
    margin:20px auto 0;
    padding:14px 20px;
    border-radius:var(--radius,16px);
    background:#fdecea;
    color:#a93226;
    font-size:14px;
}

/* ---------- Results ---------- */
.pemetaan-results{
    padding:70px 0;
    background:var(--white);
}

.pemetaan-disclaimer{
    max-width:860px;
    margin:0 auto 26px;
    padding:16px 22px;
    border-left:4px solid var(--gold);
    background:var(--cream);
    border-radius:0 var(--radius,16px) var(--radius,16px) 0;
    font-size:14px;
    color:var(--text);
}

.pemetaan-tabs{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.pemetaan-tab{
    border:2px solid var(--border,#e5e7eb);
    background:var(--white);
    color:var(--text-soft);
    padding:10px 26px;
    border-radius:999px;
    font-size:15px;
    font-family:inherit;
    cursor:pointer;
    transition:all .25s;
}

.pemetaan-tab[aria-selected="true"],
.pemetaan-tab.active{
    background:var(--primary);
    border-color:var(--primary);
    color:var(--white);
}

.pemetaan-tab:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* ---------- Result cards ---------- */
.result-card{
    background:var(--cream);
    border-radius:var(--radius,16px);
    padding:36px;
    display:grid;
    grid-template-columns:220px 1fr;
    gap:34px;
    align-items:start;
    box-shadow:var(--shadow-sm,0 4px 12px rgba(0,0,0,.05));
}

.lp-number-wrap{
    text-align:center;
    padding:28px 10px;
    background:var(--primary);
    border-radius:var(--radius,16px);
    color:var(--white);
}

.lp-number{
    display:block;
    font-size:84px;
    font-weight:700;
    line-height:1;
    color:var(--gold);
}

.lp-master{
    display:inline-block;
    margin-top:10px;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    border:1px solid var(--gold);
    color:var(--gold);
    border-radius:999px;
    padding:4px 12px;
}

.lp-detail h3{
    color:var(--primary);
    font-size:26px;
    margin-bottom:12px;
}

.lp-detail > p{
    color:var(--text);
    margin-bottom:20px;
}

.result-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:20px;
}

.result-cols h4,
.reflection-box h4{
    color:var(--primary);
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:10px;
}

.result-cols ul{
    list-style:none;
}

.result-cols li{
    position:relative;
    padding-left:18px;
    margin-bottom:8px;
    font-size:14.5px;
    color:var(--text);
}

.result-cols li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
}

.reflection-box{
    background:var(--white);
    border-radius:var(--radius,16px);
    padding:20px 24px;
    border:1px solid var(--border,#e5e7eb);
    margin-bottom:16px;
}

.reflection-box p{
    color:var(--text);
    font-size:14.5px;
    margin:0;
}

/* ---------- Destiny Matrix ---------- */
.dm-layout{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:36px;
    align-items:start;
}

.dm-svg-wrap{
    position:relative;
}

#dm-svg{
    width:100%;
    height:auto;
    display:block;
}

#dm-svg .dm-line{
    stroke:var(--primary-light);
    stroke-width:1.2;
    opacity:.35;
}

#dm-svg .dm-node circle{
    fill:var(--white);
    stroke:var(--gold);
    stroke-width:2;
    cursor:pointer;
    transition:fill .2s,stroke .2s;
}

#dm-svg .dm-node text{
    font-size:16px;
    font-weight:600;
    fill:var(--primary);
    text-anchor:middle;
    dominant-baseline:central;
    pointer-events:none;
}

#dm-svg .dm-node:hover circle,
#dm-svg .dm-node:focus circle,
#dm-svg .dm-node.selected circle{
    fill:var(--gold);
}

#dm-svg .dm-node.center circle{
    stroke-width:3;
    stroke:var(--primary);
}

#dm-svg .dm-label{
    font-size:10px;
    fill:var(--text-soft);
    text-anchor:middle;
    letter-spacing:.05em;
}

.dm-tooltip{
    position:absolute;
    background:var(--primary);
    color:var(--white);
    font-size:12px;
    padding:8px 12px;
    border-radius:8px;
    pointer-events:none;
    max-width:220px;
    z-index:5;
    box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.15));
}

.dm-node-detail{
    background:var(--cream);
    border-radius:var(--radius,16px);
    padding:26px;
    margin-bottom:18px;
}

.dm-node-detail h3{
    color:var(--primary);
    font-size:20px;
    margin-bottom:8px;
}

.dm-node-detail .pos{
    display:inline-block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--earth);
    border:1px solid var(--earth);
    border-radius:999px;
    padding:3px 10px;
    margin-bottom:10px;
}

.dm-node-detail ul{
    margin:10px 0 0 18px;
    font-size:14px;
    color:var(--text);
}

.dm-lines,
.dm-age-cycle{
    background:var(--cream);
    border-radius:var(--radius,16px);
    padding:22px 26px;
    margin-bottom:18px;
}

.dm-lines h4,
.dm-age-cycle h4{
    color:var(--primary);
    margin-bottom:12px;
}

.dm-line-row{
    display:flex;
    gap:12px;
    align-items:baseline;
    padding:8px 0;
    border-bottom:1px dashed var(--border,#e5e7eb);
    font-size:14px;
}

.dm-line-row:last-child{
    border-bottom:none;
}

.dm-line-row .pos{
    min-width:86px;
    font-weight:600;
    color:var(--primary);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.dm-line-row .arcana{
    font-weight:700;
    color:var(--gold);
    min-width:22px;
}

.dm-age-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.dm-age-item{
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-radius:10px;
    padding:10px 12px;
    font-size:13px;
    cursor:pointer;
    transition:border-color .2s;
}

.dm-age-item:hover{
    border-color:var(--gold);
}

.dm-age-item .age{
    display:block;
    color:var(--text-soft);
    font-size:11px;
}

.dm-age-item .arcana{
    font-weight:700;
    color:var(--primary);
    font-size:16px;
}

/* ---------- Human Design ---------- */
.hd-unavailable{
    background:var(--cream);
    border-radius:var(--radius,16px);
    padding:40px;
    text-align:center;
}

.hd-unavailable h3{
    color:var(--primary);
    margin-bottom:10px;
}

.hd-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:30px;
}

.hd-fact{
    background:var(--cream);
    border-radius:var(--radius,16px);
    padding:16px 20px;
}

.hd-fact span{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-soft);
    margin-bottom:4px;
}

.hd-fact strong{
    color:var(--primary);
    font-size:16px;
}

.hd-layout{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:36px;
    align-items:start;
}

.hd-svg-wrap{
    position:sticky;
    top:100px;
}

#hd-svg{
    width:100%;
    height:auto;
    display:block;
}

#hd-svg .center{
    fill:none;
    stroke:var(--primary-light);
    stroke-width:2;
    transition:fill .25s;
}

#hd-svg .center.defined{
    fill:#e8c87a;
    stroke:var(--earth);
}

#hd-svg .channel-line{
    stroke:#cfd6de;
    stroke-width:5;
    stroke-linecap:round;
}

#hd-svg .channel-line.defined{
    stroke:var(--primary);
}

#hd-svg .channel-line.personal{
    stroke:#333;
}

#hd-svg .channel-line.design{
    stroke:#b3543f;
}

#hd-svg .gate-dot{
    fill:var(--white);
    stroke:var(--primary-light);
    stroke-width:1.5;
}

#hd-svg .gate-dot.active{
    fill:var(--gold);
    stroke:var(--earth);
}

#hd-svg text{
    font-size:10px;
    fill:var(--primary);
    text-anchor:middle;
}

.hd-legend{
    display:flex;
    gap:18px;
    justify-content:center;
    margin-top:12px;
    font-size:13px;
    color:var(--text-soft);
}

.hd-legend .sw{
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:3px;
    margin-right:6px;
    vertical-align:-2px;
    border:1px solid var(--earth);
}

.hd-legend .sw.defined{
    background:#e8c87a;
}

.hd-legend .sw.open{
    background:var(--white);
}

.hd-activations{
    margin-top:34px;
    background:var(--cream);
    border-radius:var(--radius,16px);
    padding:20px 26px;
}

.hd-activations summary{
    cursor:pointer;
    font-weight:600;
    color:var(--primary);
}

.hd-act-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:18px;
}

.hd-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.hd-table td{
    padding:6px 8px;
    border-bottom:1px solid var(--border,#e5e7eb);
    color:var(--text);
}

.hd-table td:last-child{
    text-align:right;
    font-weight:600;
    color:var(--primary);
    white-space:nowrap;
}

/* ---------- Reflection ---------- */
.pemetaan-reflection{
    padding:70px 0;
    background:var(--cream);
}

.reflection-questions{
    max-width:760px;
    margin:30px auto 0;
    display:grid;
    gap:14px;
}

.reflection-q{
    background:var(--white);
    border-radius:var(--radius,16px);
    padding:20px 24px;
    border-left:4px solid var(--gold);
    font-size:15px;
    color:var(--text);
}

/* ---------- CTA ---------- */
.pemetaan-cta{
    padding:80px 0;
    text-align:center;
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
    .dm-layout,
    .hd-layout{
        grid-template-columns:1fr;
    }
    .hd-svg-wrap{
        position:static;
        max-width:340px;
        margin:0 auto;
    }
    .result-card{
        grid-template-columns:1fr;
    }
    .lp-number-wrap{
        max-width:240px;
        margin:0 auto;
    }
}

@media (max-width:768px){
    .pemetaan-form-grid{
        grid-template-columns:1fr;
    }
    .pemetaan-calculators{
        grid-template-columns:1fr;
    }
    .hd-summary{
        grid-template-columns:repeat(2,1fr);
    }
    .result-cols,
    .hd-act-cols{
        grid-template-columns:1fr;
    }
    .dm-age-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:480px){
    .pemetaan-hero{
        padding:64px 0 56px;
    }
    .result-card{
        padding:22px;
    }
    .hd-summary{
        grid-template-columns:1fr;
    }
    .pemetaan-form-actions{
        flex-direction:column;
    }
    .pemetaan-form-actions .btn-primary,
    .pemetaan-form-actions .btn-outline{
        text-align:center;
    }
}

/* ---------- glossary popup + clickable info ---------- */
.sk-glossable{
    cursor:pointer;
    border-bottom:1px dashed var(--gold);
    display:inline-block;
}
.sk-glossable:hover{ color:var(--gold); }
.sk-glossable:focus{
    outline:2px solid var(--gold);
    outline-offset:2px;
    border-radius:2px;
}

.hd-act-row{
    cursor:pointer;
    transition:background .15s;
}
.hd-act-row:hover{ background:rgba(200,169,107,.12); }
.hd-act-row:focus{
    outline:2px solid var(--gold);
    outline-offset:-2px;
}

.sk-gloss-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(23,48,79,.55);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.sk-gloss-modal[hidden]{ display:none; }

.sk-gloss-box{
    background:#fff;
    border-radius:16px;
    border-top:4px solid var(--gold);
    box-shadow:0 20px 60px rgba(23,48,79,.3);
    max-width:440px;
    width:100%;
    padding:28px 30px;
    text-align:left;
    animation:skGlossIn .18s ease;
}
@keyframes skGlossIn{
    from{ opacity:0; transform:translateY(10px) scale(.98); }
    to{ opacity:1; transform:none; }
}
.sk-gloss-title{
    color:var(--primary);
    font-size:18px;
    margin:0 0 10px;
}
.sk-gloss-text{
    color:var(--text-soft);
    font-size:14px;
    line-height:1.75;
    margin:0 0 18px;
}
.sk-gloss-close{
    display:block;
    margin:0 0 0 auto;
    padding:9px 24px;
    border:0;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    transition:background .2s;
}
.sk-gloss-close:hover{ background:var(--primary-light); }

/* ---------- HD Activation cards ---------- */
.hd-act-grid{
    display:grid;
    gap:10px;
    margin-top:14px;
}

.hd-act-card{
    display:block;
    width:100%;
    text-align:left;
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-left:3px solid var(--gold);
    border-radius:12px;
    padding:14px 16px;
    cursor:pointer;
    font:inherit;
    color:var(--text);
    transition:box-shadow .15s,transform .15s,border-color .15s;
}
.hd-act-card:hover{
    border-color:var(--gold);
    box-shadow:0 6px 18px rgba(23,48,79,.12);
    transform:translateY(-1px);
}
.hd-act-card:focus{
    outline:2px solid var(--gold);
    outline-offset:2px;
}
.hd-act-card.plain{
    cursor:default;
}
.hd-act-card.plain:hover{
    box-shadow:none;
    transform:none;
}

.hd-act-head{
    display:flex;
    align-items:baseline;
    gap:8px;
}
.hd-act-sym{
    color:var(--gold);
    font-size:16px;
}
.hd-act-planet{
    font-weight:600;
    color:var(--primary);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.hd-act-layer{
    margin-left:auto;
    font-size:10.5px;
    color:var(--text-soft);
    text-transform:uppercase;
    letter-spacing:.06em;
}
.hd-act-num{
    font-size:24px;
    font-weight:700;
    color:var(--primary);
    margin-top:8px;
    line-height:1;
}
.hd-act-gl{
    font-size:11.5px;
    color:var(--text-soft);
    margin-top:4px;
}
.hd-act-name{
    font-size:13px;
    color:var(--gold);
    font-weight:600;
    margin-top:6px;
}
.hd-act-cta{
    font-size:12px;
    color:var(--primary);
    font-weight:600;
    margin-top:8px;
}

/* ---------- Activation detail modal ---------- */
.hd-act-box{
    max-width:560px;
    max-height:85vh;
    overflow-y:auto;
}
.hd-act-detail{
    font-size:14px;
    color:var(--text);
}
.hd-detail-head{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:16px;
}
.hd-detail-sym{
    font-size:34px;
    color:var(--gold);
    line-height:1;
}
.hd-detail-act{
    font-size:12.5px;
    color:var(--text-soft);
    margin-top:2px;
}
.hd-sec{
    margin-bottom:14px;
}
.hd-sec h5{
    margin:0 0 4px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--gold);
}
.hd-sec p{
    margin:0;
    font-size:13.5px;
    line-height:1.7;
    color:var(--text);
}
.hd-sec-list{
    margin:0;
    padding-left:18px;
    font-size:13.5px;
    line-height:1.7;
    color:var(--text);
}

/* ---------- Pattern summary ---------- */
.hd-pat-box{
    margin-top:22px;
}
.hd-pat-box h4{
    margin:0 0 10px;
    color:var(--primary);
}
.hd-pat-box h5{
    margin:14px 0 6px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--gold);
}
.hd-pat-list{
    margin:0;
    padding-left:18px;
    font-size:13.5px;
    line-height:1.7;
    color:var(--text);
}
.hd-pat-item{
    margin:0 0 6px;
    font-size:13px;
    line-height:1.65;
    color:var(--text);
}
.hd-act-disclosure{
    margin:16px 0 0;
    font-size:12px;
    color:var(--text-soft);
    font-style:italic;
}

/* ---------- HD General Reading ---------- */
.hd-reading{ margin-top:18px; }
.hd-read-sec{
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-radius:12px;
    padding:14px 18px;
    margin-top:10px;
}
.hd-read-sec summary{
    cursor:pointer;
    font-weight:600;
    color:var(--primary);
    font-size:14px;
}
.hd-read-sec summary:hover{ color:var(--gold); }
.hd-read-sec h5{
    margin:14px 0 4px;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--gold);
}
.hd-read-p{
    margin:6px 0;
    font-size:13.5px;
    line-height:1.75;
    color:var(--text);
}
.hd-read-li{ padding-left:10px; }
.hd-read-na{
    margin:8px 0 4px;
    font-size:13px;
    color:var(--text-soft);
    font-style:italic;
}
.hd-read-item{
    border-left:3px solid var(--gold);
    padding-left:12px;
    margin:10px 0;
}
.hd-read-item h5{ margin-top:0; }

/* ---------- DM / LP Reading ---------- */
.dm-reading{ margin-top:18px; }
.lp-reading{ grid-column:1 / -1; margin-top:18px; }
.dm-current{
    border-left-color:var(--primary);
    background:rgba(200,169,107,.08);
    padding:10px 12px;
    border-radius:8px;
}

/* ---------- HD Type transparency ---------- */
.hd-type-why{
    background:var(--cream, #faf7f0);
    border:1px solid var(--line, #e5ddcc);
    border-radius:10px;
    padding:14px 16px;
    margin:14px 0;
    font-size:13px;
}
.hd-type-why h4{ margin:0 0 8px; font-size:14px; }
.hd-type-why ul{ margin:0 0 6px; padding-left:18px; }
.hd-type-why li{ margin:2px 0; }

/* ---------- Save / lead capture ---------- */
.pemetaan-save{ margin-top:34px; }
.pemetaan-save-card{
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-radius:var(--radius,16px);
    padding:30px 28px;
    max-width:560px;
    margin:0 auto;
    text-align:center;
    box-shadow:var(--shadow-sm,0 4px 12px rgba(0,0,0,.05));
}
.pemetaan-save-card h3{
    color:var(--primary);
    font-size:22px;
    margin:0 0 8px;
}
.pemetaan-save-lead{
    color:var(--text-soft);
    font-size:14.5px;
    margin:0 0 14px;
}
.pemetaan-save-benefits{
    list-style:none;
    margin:0 0 20px;
    padding:0;
    display:flex;
    gap:8px 20px;
    justify-content:center;
    flex-wrap:wrap;
    font-size:13px;
    color:var(--gold);
    font-weight:600;
}
#sk-lead-form{ text-align:left; }
.lead-consent{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:12.5px;
    color:var(--text-soft);
    margin:10px 0;
    line-height:1.55;
}
.lead-consent input{ margin-top:3px; flex:none; }
.lead-note{
    font-size:11.5px;
    color:var(--text-soft);
    font-style:italic;
    margin:10px 0 0;
    text-align:center;
}
#sk-lead-submit{ width:100%; margin-top:14px; }
.pemetaan-save-done{
    padding:18px 0 4px;
    color:var(--primary);
    font-weight:600;
    font-size:15px;
}

/* ---------- Next steps / CTA ---------- */
.pemetaan-next{ margin-top:36px; }
.pemetaan-next h3{
    color:var(--primary);
    font-size:24px;
    text-align:center;
    margin:0 0 8px;
}
.pemetaan-next-lead{
    text-align:center;
    color:var(--text-soft);
    font-size:14px;
    max-width:560px;
    margin:0 auto 24px;
}
.pemetaan-next-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    max-width:900px;
    margin:0 auto;
}
.next-card{
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-radius:14px;
    padding:20px;
}
.next-card h4{
    color:var(--primary);
    font-size:15.5px;
    margin:0 0 8px;
}
.next-card p{
    font-size:13.5px;
    color:var(--text-soft);
    line-height:1.6;
    margin:0 0 14px;
}
.next-cta{
    display:inline-block;
    font-size:13.5px;
    font-weight:600;
    color:var(--gold);
    text-decoration:none;
    border-bottom:2px solid var(--gold);
    padding-bottom:2px;
}
.next-cta:hover{ color:var(--primary); border-color:var(--primary); }

.pemetaan-consult{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    border-radius:16px;
    padding:26px 28px;
    margin-top:26px;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}
.pemetaan-consult-text h4{
    color:var(--gold);
    font-size:18px;
    margin:0 0 6px;
}
.pemetaan-consult-text p{
    color:rgba(255,255,255,.8);
    font-size:13.5px;
    margin:0;
    max-width:480px;
}

.pemetaan-pdf{
    text-align:center;
    margin-top:20px;
}

.pemetaan-share{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:24px;
}
.pemetaan-share-label{
    font-size:13px;
    color:var(--text-soft);
    font-weight:600;
}
.share-btn{
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-radius:999px;
    padding:8px 18px;
    font-size:13px;
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
    transition:border-color .2s,color .2s;
}
.share-btn:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- Testimonials ---------- */
.pemetaan-testimonials{
    padding:70px 0;
    background:var(--cream);
}
.pemetaan-testimonials h2{
    color:var(--primary);
    font-size:clamp(22px,3vw,30px);
    text-align:center;
    margin-bottom:34px;
}
.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    max-width:1080px;
    margin:0 auto;
}
.testimonial-card{
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-left:3px solid var(--gold);
    border-radius:14px;
    padding:22px;
    margin:0;
    box-shadow:var(--shadow-sm,0 4px 12px rgba(0,0,0,.05));
}
.testimonial-stars{
    color:var(--gold);
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:8px;
}
.testimonial-card blockquote{
    margin:0 0 12px;
    font-size:14px;
    line-height:1.7;
    color:var(--text);
    font-style:italic;
}
.testimonial-card figcaption{
    font-size:12.5px;
    font-weight:600;
    color:var(--primary);
}
.testimonial-method{
    color:var(--text-soft);
    font-weight:400;
}

/* ---------- Method landing pages ---------- */
.method-discover{
    max-width:560px;
    margin:24px auto 0;
    background:var(--white);
    border:1px solid var(--border,#e5e7eb);
    border-radius:var(--radius,16px);
    padding:26px 30px;
    text-align:left;
}
.method-list-wide li{
    font-size:15px;
    padding:7px 0 7px 20px;
}
.method-links{
    display:flex;
    gap:10px 22px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:22px;
}
.method-links a{
    color:var(--primary);
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    border-bottom:1.5px solid var(--gold);
    padding-bottom:2px;
}
.method-links a:hover{ color:var(--gold); }

/* ---- Natal Chart ---------------------------------------------------- */
.natal-summary { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-bottom:1rem; }
.natal-fact { font-size:.95rem; }
.natal-block { margin-bottom:1.25rem; overflow-x:auto; }
.natal-block h4 { margin:0 0 .5rem; }
.natal-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.natal-table th, .natal-table td {
    padding:.4rem .6rem; text-align:left;
    border-bottom:1px solid rgba(0,0,0,.08);
}
.natal-table th { font-weight:600; opacity:.75; }
.natal-reading { margin-top:1rem; }

/* ---- Member gate (premium detail lock) ------------------------------ */
.member-lock{
    margin-top:18px;
    padding:18px 20px;
    border:1px dashed var(--gold);
    border-radius:12px;
    background:rgba(212,175,55,.06);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}
.member-lock .member-lock-text{
    flex:1 1 240px;
    margin:0;
    font-size:14px;
    opacity:.9;
}
.member-lock .member-lock-btn{
    white-space:nowrap;
    padding:10px 24px;
    font-size:13.5px;
}

.member-gate{
    margin:28px auto 0;
    max-width:640px;
    text-align:center;
    padding:26px 28px;
    border:1px solid var(--gold);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.03));
}
.member-gate h3{ margin:0 0 10px; }
.member-gate p{ margin:0 0 18px; font-size:15px; opacity:.9; }
.member-gate .member-gate-btn{
    display:inline-block;
    padding:15px 42px;
    font-size:16px;
    letter-spacing:.3px;
}

.member-lock-link{
    display:inline-block;
    margin-top:8px;
    color:var(--primary);
    font-weight:600;
    font-size:13.5px;
    text-decoration:none;
    border-bottom:1.5px solid var(--gold);
    padding-bottom:2px;
}
.member-lock-link:hover{ color:var(--gold); }

/* --- Couple Self Mapping (§64-67) ----------------------------------- */
.couple-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:8px; }
.couple-person{ border:1px solid rgba(200,169,107,.25); border-radius:14px; padding:20px 22px; }
.couple-person legend{ font-family:var(--font-serif,serif); font-weight:600; color:var(--primary,#17304f); padding:0 8px; }
.couple-consent{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; font-size:13.5px; color:#4b5563; }
.couple-consent input{ margin-top:3px; }
.couple-preview-card{ border:1px solid rgba(200,169,107,.35); border-radius:14px; padding:26px 28px; margin-top:18px; background:linear-gradient(180deg,#fffdf8,#fff); }
.couple-preview-card .teaser{ font-size:16px; color:#17304f; font-weight:600; }
.method-checklist{ list-style:none; padding:0; margin:14px 0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.method-checklist li{ font-size:13.5px; color:#374151; }
.method-checklist li.na{ color:#9ca3af; }
.teaser-sub{ font-size:13px; color:#6b7280; }
.couple-full .couple-block{ border-left:3px solid var(--gold,#c8a96b); padding:4px 0 4px 16px; margin:18px 0; }
.couple-full .couple-block h4{ margin:0 0 6px; color:var(--primary,#17304f); font-size:15px; }
.couple-full .couple-block p{ margin:0 0 8px; font-size:13.5px; line-height:1.65; color:#374151; }
@media (max-width:760px){ .couple-grid{ grid-template-columns:1fr; } .method-checklist{ grid-template-columns:1fr; } }