/* ── PIKA JOURNEY MANAGER PAGE EXTENSION ─────────────────────── */
/* Scope: .jny-* only. Target < 90 lines.                         */

.jny-sequence-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 16px;
    background: #fbfcf8;
    border-radius: 16px;
}

.jny-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #ffffff;
    border: 1px solid #dce5d2;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #23413b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.jny-step i {
    font-size: 1.15rem;
    color: var(--pika-primary, #4a7c59);
}

.jny-step-end {
    border-color: #c4dda8;
    background: #f4faee;
}

.jny-step-end i {
    color: #27ae60;
}

.jny-connector {
    color: #9cb580;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

/* FAQ Details/Summary */
.jny-faq-details {
    background: #ffffff;
    border: 1px solid #e2ebd8;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jny-faq-details[open] {
    border-color: #b5cfa0;
    box-shadow: 0 4px 14px rgba(35, 65, 59, 0.05);
}

.jny-faq-summary {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    color: #23413b;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
}

.jny-faq-summary::-webkit-details-marker {
    display: none;
}

.jny-faq-summary i {
    transition: transform 0.2s ease;
    font-size: 1.2rem;
    color: #62746d;
}

.jny-faq-details[open] .jny-faq-summary i {
    transform: rotate(180deg);
    color: #23413b;
}

.jny-faq-body {
    padding: 0 22px 20px 22px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #486258;
}

/* Added Animations for Inner Pages */
.inner-scene-window {
    animation: inner-subtle-float 8s ease-in-out infinite;
}

@keyframes inner-subtle-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .inner-scene-window {
        animation: none;
    }
}

.journey-overview-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:center; gap:36px; }
.journey-overview-art { margin:0; min-width:0; }
.journey-overview-art img { display:block; width:100%; height:auto; border-radius:20px; }
.journey-overview-art figcaption { font-size:12px; color:#617369; margin-top:12px; }
.journey-overview-layout > .bg-white { margin:0!important; padding:28px!important; border:0!important; background:transparent!important; }
.journey-demo-section { background:#10292e; color:#dce8df; padding:72px 0; }
.journey-demo-section h2 { color:#f3f7ed; font-size:clamp(30px,3.5vw,48px); letter-spacing:-.035em; }
.journey-demo-section .ph-eyebrow { color:#c1e990; }
.journey-demo { margin-top:32px; padding:28px; background:#eef2e9; color:#183b32; border-radius:20px; }
.journey-demo-toolbar { display:flex; justify-content:space-between; gap:16px; font-size:12px; }
.journey-demo-flow { max-width:680px; margin:32px auto 0; }
.jd-node { position:relative; display:flex; align-items:center; gap:16px; padding:20px; background:#fff; border-radius:12px; margin:24px auto 0; max-width:420px; box-shadow:0 8px 24px #10292e08; }
.jd-node:before { content:""; position:absolute; width:2px; height:24px; background:#91ab76; bottom:100%; left:50%; }
.jd-node:first-child:before { display:none; }
.jd-node i { font-size:26px; color:#6e8c40; }
.jd-node small { font-size:10px; letter-spacing:.08em; }
.jd-node h3 { font-size:18px; color:#183b32; margin:5px 0 0; }
.jd-branches { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.jd-branches .jd-node { width:100%; }
.jd-branches .jd-node:before { display:block; }
.jd-finish { text-align:center; margin:28px 0 0; font-size:13px; }
.journey-demo-note { font-size:12px; margin:16px 0 0; }
.journey-demo.is-ready:not(.is-playing) .jd-node,.journey-demo.is-ready:not(.is-playing) .jd-finish { opacity:0; }
.journey-demo.is-playing .jd-node { animation:jd-place .8s both; animation-delay:calc(var(--step)*1.6s); }
.journey-demo.is-playing .jd-finish { animation:jd-place .7s 8s both; }
@keyframes jd-place { from { opacity:0; transform:translate(-30px,-14px) scale(.96); } to { opacity:1; transform:none; } }
@media(max-width:991px) { .journey-overview-layout { grid-template-columns:1fr; } .journey-overview-art { max-width:680px; margin:auto; } }
@media(max-width:600px) { .jd-branches { grid-template-columns:1fr; gap:0; } .journey-demo { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .journey-demo .jd-node,.journey-demo .jd-finish { animation:none!important; opacity:1!important; } }

.journey-demo .jd-detail { font-size:13px; line-height:1.65; margin:10px 0 0; color:#53695e; }
.journey-demo .jd-branches > :first-child { background:#e5efd9; }
.journey-demo .jd-finish { max-width:620px; margin:28px auto 0; font-size:15px; font-weight:500; line-height:1.6; }