/* Scoped to the /world-journey preview. */
.wj-page .wj-loop { position:relative; width:100%; max-width:760px; aspect-ratio:16/9; margin:0 auto 24px; overflow:hidden; background:var(--ink); }
.wj-page .wj-loop video { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.wj-page .wj-loop-play { position:absolute; inset:0; margin:auto; width:64px; height:64px; min-height:64px; padding:0; border-radius:50%; overflow:hidden; }
.wj-page .wj-loop-play[hidden] { display:none; }
.wj-page .wj-loop-play::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--gold-light) 70%,transparent) 50%,transparent 65%); animation:wj-shimmer 3s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .wj-page .wj-loop-play::after { animation:none; } }
body.wj-page.map-page.immersive-map { height:auto; min-height:100dvh; overflow:auto; }
.wj-main { padding:16px 0 calc(110px + env(safe-area-inset-bottom)); }
.wj-progress { margin:0 auto 8px; text-align:center; color:var(--mist); font:600 .75rem/1.4 Arial,sans-serif; letter-spacing:.12em; }
.wj-owl { display:flex; align-items:center; gap:14px; max-width:640px; margin:0 auto 18px; padding:12px 16px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.wj-owl img { flex:none; width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid var(--gold); }
.wj-owl p { margin:0; color:var(--gold-light); font-size:1rem; line-height:1.5; outline:none; }
.wj-step { width:calc(100% - 24px); max-width:1100px; margin:0 auto; }
.wj-step h2 { outline:none; }
.wj-life-copy { max-width:600px; margin:32px auto 0; text-align:center; color:var(--world-soft-text); }
.wj-life-copy p { margin:0 0 28px; font-size:1.15rem; line-height:1.85; text-wrap:pretty; }
.wj-life-copy strong { color:var(--gold-light); font-weight:700; }
.wj-benefits-note { text-align:center; line-height:1.7; }

/* Illustrated discovery: live text outside the transparent brush-edged paintings. */
.wj-page .wj-illustrated { max-width:900px; padding:24px 8px 20px; }
.wj-editorial-head { max-width:560px; margin:0 auto 24px; text-align:center; }
.wj-page .wj-editorial-head .eyebrow { margin:0 0 14px; color:var(--gold-light); letter-spacing:0; font-size:.75rem; }
.wj-page .wj-editorial-head h2 { margin:0; color:var(--mist); font-size:2rem; line-height:1.2; letter-spacing:0; text-wrap:balance; }
.wj-page .wj-editorial-head > p:not(.eyebrow) { margin:16px 0 0; color:var(--mist); font-size:1rem; line-height:1.65; }
.wj-skills-flow { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; max-width:440px; margin:0 auto; padding:0; list-style:none; }
.wj-flow-heading { display:flex; align-items:center; justify-content:center; gap:12px; }
.wj-flow-number { flex:none; color:var(--gold-light); font:600 1.15rem/1.2 Cinzel,serif; }
.wj-page .wj-illustrated h3 { margin:0; color:var(--mist); font-size:1.25rem; line-height:1.4; letter-spacing:0; }
.wj-page .wj-painting { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; border:0; border-radius:0; background:none; margin:12px auto; }
.wj-page .wj-skills-flow p { margin:0 auto; max-width:340px; color:var(--mist); font-size:1rem; line-height:1.7; text-align:center; }
.wj-page .wj-illustrated strong { color:inherit; font-weight:700; }
.wj-flow-arrow { position:relative; height:42px; display:grid; place-items:center; color:var(--gold-light); font-size:1.8rem; line-height:1; }
.wj-page .wj-peace-painting { max-width:520px; margin:0 auto 24px; }
.wj-page .wj-benefit-list { max-width:680px; margin:0 auto; padding:0; list-style:none; color:var(--gold-light); }
.wj-page .wj-benefit-list li { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:16px; padding:16px 0; margin:0; border-bottom:1px solid var(--line); font-size:1.125rem; font-weight:500; line-height:1.55; text-wrap:pretty; }
.wj-page .wj-benefit-list li:last-child { border-bottom:0; }
.wj-page .wj-benefit-list li span::before { content:"• "; }
.wj-page .wj-benefit-painting { display:block; width:112px; height:112px; object-fit:contain; }
@media (min-width:760px) { .wj-page .wj-benefit-list li { grid-template-columns:152px minmax(0,1fr); gap:28px; font-size:1.25rem; } .wj-page .wj-benefit-painting { width:152px; height:152px; } }
.wj-page .wj-benefits-disclosure { max-width:560px; margin:18px auto 0; color:var(--mist); font-size:.8rem; line-height:1.65; }
@media (min-width:760px) {
  .wj-page .wj-illustrated { padding-top:36px; }
  .wj-skills-flow { grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); max-width:900px; align-items:start; gap:16px; }
  .wj-flow-arrow { align-self:center; transform:rotate(-90deg); }
  .wj-page .wj-editorial-head h2 { font-size:2.5rem; }
}

/* Map inside the step instead of full screen. */
.wj-map { position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.wj-page .wj-map .world-scroll { position:relative; inset:auto; height:62dvh; padding:0; }
.wj-page .wj-map .world-scroll::after { position:absolute; }
.wj-page .wj-map .world-canvas { width:max(100%,110.2dvh); }
.wj-page .wj-map .map-dock { position:absolute; }
.wj-page #place-enter, .wj-page #place-access { display:none; }

/* Guides with visible checkboxes. */
.wj-guide-grid { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.wj-guide { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.wj-guide img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:12px; }
.wj-guide h3 { margin:4px 0 0; }
.wj-guide p { margin:0; }
.wj-drawn { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px; min-height:44px; cursor:pointer; color:var(--gold-light); }
.wj-drawn input { width:22px; height:22px; accent-color:var(--gold); }


.wj-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:center; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--ink); border-top:1px solid var(--line); }
.wj-bar button { min-height:48px; min-width:120px; }
.wj-bar .primary { flex:1; max-width:360px; }

/* Golden Journey: one chapter per screen, exactly as on the homepage. */
.wj-page #wjw-golden-journey .gj-intro,
.wj-page #wjw-golden-journey .gj-trail { display:none; }
.wj-page #wjw-golden-journey[data-wj-show] > .gj-content > section { display:none; }
.wj-page #wjw-golden-journey[data-wj-show="choose"] #gj-choose,
.wj-page #wjw-golden-journey[data-wj-show="meet"] #gj-meet,
.wj-page #wjw-golden-journey[data-wj-show="discover"] #gj-discover { display:block; }

/* FAQ: clearly expandable. */
.wj-faq-hint { color:var(--mist); margin:4px 0 16px; }
.wj-page .wj-faq-item { border:1px solid var(--line); border-radius:14px; background:var(--panel); margin:0 0 10px; padding:0; }
.wj-page .wj-faq-item summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; padding:12px 16px; cursor:pointer; color:var(--gold-light); font-weight:600; }
.wj-page .wj-faq-item summary::-webkit-details-marker { display:none; }
.wj-page .wj-faq-item summary::after { content:"+"; flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--gold); font-size:1.2rem; line-height:1; }
.wj-page .wj-faq-item[open] summary::after { content:"−"; }
.wj-page .wj-faq-item p { margin:0; padding:0 16px 18px; }
.wj-page .wj-faq-item p strong { font-weight:700; color:var(--mist); }

/* The bottom bar is the only way forward. */
.wj-page #gj-travel, .wj-page #gj-to-crafts { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* v4: subtle Back on top, one clear centred Continue with a slow shimmer. */
.wj-top { position:relative; display:flex; align-items:center; justify-content:space-between; width:calc(100% - 24px); max-width:1100px; margin:0 auto 8px; padding:8px 0; }
.wj-top .wj-progress { margin:0; }
.wj-back { min-height:40px; padding:6px 4px; border:0; background:transparent; color:var(--mist); font:600 .8rem/1 Arial,sans-serif; letter-spacing:.08em; cursor:pointer; opacity:.75; }
.wj-back[hidden] { visibility:hidden; display:block; }
.wj-bar { background:linear-gradient(to top, var(--ink) 70%, transparent); border-top:0; }
.wj-bar .wj-next { position:relative; overflow:hidden; flex:0 1 360px; min-height:56px; font-size:1rem; }
.wj-bar .wj-next::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, color-mix(in oklab, var(--gold-light) 70%, transparent) 50%, transparent 65%); transform:translateX(-120%); animation:wj-shimmer 6s ease-in-out infinite; pointer-events:none; }
@keyframes wj-shimmer { 0%,60% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .wj-bar .wj-next::after { animation:none; } }
.wj-bar:has(.wj-next[hidden]) { display:none; }
.wj-helps-list { max-width:640px; margin:20px auto 0; padding:0; list-style:none; display:grid; gap:12px; }
.wj-helps-list li { display:grid; gap:4px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.wj-helps-list strong { color:var(--gold-light); }
.wj-helps-list span, .wj-note { color:var(--mist); }
.wj-note { max-width:640px; margin:14px auto 0; font-size:.9rem; }
/* Ask: the question box stays visible above the conversation. */
.wj-ask .wj-ask-form { position:sticky; top:56px; z-index:30; margin:0 0 12px; padding:8px; border-radius:18px; background:var(--ink); }
.wj-wait { opacity:.7; font-style:italic; }
.wj-step[data-step="signup"] .su-card { margin:0 auto; }
/* Lore: the image and the story together, short and punchy, in the sales narrative font. */
.wj-lore-figure { max-width:800px; margin:0 auto; }
.wj-lore-figure img { display:block; width:100%; height:auto; max-height:450px; object-fit:contain; margin:0 auto; border-radius:14px; border:1px solid var(--line); }
@media (max-width:700px){ .wj-lore-figure img { max-height:240px; width:auto; max-width:100%; } }
.wj-lore-copy { max-width:640px; margin:18px auto 0; text-align:center; }
.wj-lore-copy p { font-size:clamp(1.05rem,3vw,1.2rem); line-height:1.7; color:var(--world-soft-text); }
.wj-lore-copy strong { color:var(--gold-light); }
.wj-ask-head { display:flex; align-items:center; gap:14px; max-width:640px; margin:0 0 14px; }
.wj-ask-head img { flex:none; width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:top; border:1px solid var(--gold); }
.wj-ask-head h2 { margin:2px 0 4px; }
.wj-ask-head .wj-faq-hint { margin:0; }
.wj-owl-msg { position:relative; margin-left:40px; }
.wj-owl-msg::before { content:""; position:absolute; left:-40px; top:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--gold); background:url(/site/golden-journey/assets/owl.webp) center top/cover; }
.wj-step[data-step="signup"] .su-card { border:0; background:none; box-shadow:none; }

/* The embedded contact form shares one full-height surface, not a sales-page tile. */
body.wj-page:has(.wj-step[data-step="signup"]:not([hidden])) { min-height:100svh; background:var(--deep); }
.wj-page .wj-main:has(.wj-step[data-step="signup"]:not([hidden])) { display:flex; flex-direction:column; min-height:100svh; padding:16px 0 calc(32px + env(safe-area-inset-bottom)); }
.wj-page .wj-step[data-step="signup"]:not([hidden]) { flex:1; display:grid; align-items:center; width:calc(100% - 40px); max-width:480px; padding:24px 0; }
.wj-page .wj-step[data-step="signup"] .su-card { width:100%; min-width:0; min-height:0; margin:0; padding:0; align-content:normal; }
.wj-page .wj-step[data-step="signup"] .su-progress { margin:0 0 24px; padding:0; border:0; text-align:center; }
.wj-page .wj-step[data-step="signup"] .su-step { gap:24px; }
.wj-page .wj-step[data-step="signup"] .su-title { color:var(--gold-light); font-size:2rem; line-height:1.35; letter-spacing:0; text-align:center; text-wrap:balance; }
.wj-page .wj-step[data-step="signup"] .su-step .eyebrow { color:var(--gold); text-align:center; }
.wj-page .wj-step[data-step="signup"] .su-sub { color:var(--mist); }
@media (max-width:640px) {
  .wj-page .wj-step[data-step="signup"] .su-card { padding:0!important; }
  .wj-page .wj-step[data-step="signup"] .su-title { font-size:1.5rem; }
}

/* Value screen: two labelled lists — what you learn, what it gives you. */
.wj-list-label { max-width:640px; margin:18px 0 -4px; color:var(--gold-light); font:700 .8rem/1.4 Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.wj-list-label + .wj-helps-list { margin-top:8px; }
/* Compare screen: books first, then the world — one list under the other. */
.wj-compare-stack { max-width:520px; margin:22px auto 0; display:grid; gap:14px; }
.wj-cmp-block { border:1px solid var(--line); border-radius:16px; padding:16px 14px 18px; }
.wj-cmp-title { margin:0 0 12px; text-align:center; font:700 .82rem/1.2 Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.wj-cmp-list { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.wj-cmp-list li { display:flex; align-items:flex-start; gap:10px; font-size:.95rem; line-height:1.5; color:var(--world-soft-text); }
.wj-green { border-color:color-mix(in oklab, #3f9d63 65%, var(--line)); background:color-mix(in oklab, #2e7d4f 20%, var(--panel)); }
.wj-red { border-color:color-mix(in oklab, #c25b4a 55%, var(--line)); background:color-mix(in oklab, #a34a3d 16%, var(--panel)); }
.wj-green strong { color:#7fd6a0; }
.wj-red strong { color:#e59a8d; }
.wj-mark { flex:none; display:grid; place-items:center; width:22px; height:22px; margin-top:1px; border-radius:50%; font-size:.8rem; line-height:1; color:#0d1a12; background:#5cb87f; }
.wj-mark.wj-no { color:#2a0f0a; background:#c96a58; }
.wj-cmp-verdict { max-width:640px; margin:14px auto 0; text-align:center; color:var(--gold-light); font-size:1.05rem; line-height:1.6; }

/* The world's first, said once — inside the books comparison. */
.wj-cmp-first { max-width:36rem; margin:18px auto 0; text-align:center; font-family:Cinzel,"Cormorant Garamond",serif; font-weight:600; font-size:clamp(1.02rem,4.1vw,1.3rem); line-height:1.55; letter-spacing:.02em; color:var(--gold-light); }

/* Shared illustrated evening comparison, in normal flow on every screen. */
.wj-entertainment-table{width:100%;table-layout:fixed;border-collapse:collapse;color:var(--mist)}
.wj-entertainment-table th,.wj-entertainment-table td{padding:16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere;line-height:1.6}
.wj-entertainment-table th{color:var(--gold-light)}
.wj-entertainment-table th:first-child{width:20%}
.wj-entertainment-table img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:14px}
.wj-contact-place{width:100%;margin:0 0 24px}
.wj-contact-place img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:600px){.wj-entertainment-table th,.wj-entertainment-table td{padding:8px;font-size:.8rem}.wj-entertainment-table th:first-child{width:23%}.wj-top{gap:12px}.wj-top a{max-width:160px;line-height:1.5;text-align:right}}