/* Interactive study map: the four visual blocks follow the study sequence. */
.method-demo .visual-method-page{padding:25px 20px 20px;border-radius:17px;transform:none;max-width:540px;box-shadow:0 15px 45px #1428460a;background:#fff}
.visual-method-page:before{height:5px}
.visual-method-page .demo-page-top{font-size:.45rem;letter-spacing:.08em;margin-bottom:24px}
.visual-method-page h3{font-size:clamp(1.32rem,5.3vw,1.7rem);line-height:1.25;letter-spacing:-.04em}
.visual-method-page .map-invitation{font-size:.71rem;margin:11px 0 0;color:#587088;line-height:1.5}
.visual-method-map{position:relative;isolation:isolate;height:336px;max-width:390px;margin:23px auto 14px;background-image:radial-gradient(#c9dce780 .8px,transparent .8px);background-size:16px 16px;border-radius:14px}
.map-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.map-connections path{vector-effect:non-scaling-stroke}
.connection-base{stroke:#c5dce6;stroke-width:2}
.map-connections circle{fill:#b6d4df;stroke:white;stroke-width:2}
.connection-flow{stroke-width:2.5;stroke-dasharray:7 6;stroke:#008c95;opacity:0}
.method-demo[data-active="1"] .flow-left,.method-demo[data-active="2"] .flow-right,.method-demo[data-active="3"] .flow-bottom{opacity:1;animation:trace-map 1s ease-out both}
.method-demo[data-active="2"] .flow-right{stroke:#8863bb}
.method-demo[data-active="3"] .flow-bottom{stroke:#142846}
@keyframes trace-map{from{stroke-dashoffset:39;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
.map-card{position:absolute;display:flex;flex-direction:column;text-align:left;border:1px solid #cfdee8;border-radius:12px;padding:13px 12px;background:#f2f8fb;color:#142846;box-shadow:0 4px 10px #14284604;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer;font-family:inherit;line-height:1.35;-webkit-tap-highlight-color:transparent}
.map-card:hover{box-shadow:0 5px 16px #14284617}
.map-card:focus-visible,.method-tab:focus-visible{outline:3px solid #007780;outline-offset:4px}
.map-card .map-step{font-size:.5rem;letter-spacing:.075em;font-weight:750;display:block;margin-bottom:9px}
.map-card strong{font-size:.8rem;line-height:1.35;letter-spacing:-.02em}
.map-concept{top:0;left:50%;transform:translateX(-50%);width:210px;min-height:90px;background:#007780;color:#fff;border-color:#007780;padding:12px 16px;box-shadow:0 6px 18px #00778025}
.map-concept .map-step{color:#c5eeed;margin-bottom:6px}
.map-root-content{display:flex;gap:12px;align-items:center}
.map-root-content strong{font-size:1.03rem;line-height:1.16}
.map-root-content svg{width:36px;flex:0 0 36px;fill:none;stroke:currentColor;stroke-width:1.8}
.map-root-content svg circle:first-child{fill:#b9eeeb20}
.map-relations,.map-example{top:132px;width:calc(50% - 10px);height:117px}
.map-relations{left:0;background:#edf8f9;border-color:#b8dfe2}
.map-example{right:0;background:#f3effa;border-color:#d9cbed}
.map-relations .map-step{color:#007780}
.map-example .map-step{color:#72509f}
.association-pair{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.association-pair>span{border:1px solid #8ebfc5;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:.7rem;font-weight:750;color:#007780;background:white}
.association-pair svg{width:35px;height:16px;fill:none;stroke:#008c95;stroke-width:2}
.map-card-note{font-size:.62rem;color:#587088;margin-top:2px}
.heat-example{display:flex;align-items:center;gap:6px;margin-top:-3px;margin-bottom:5px}
.heat-example svg{width:29px;height:29px;fill:#ffe1ac;stroke:#d88a1a;stroke-width:1.9;stroke-linecap:round}
.heat-example b{font-size:.75rem;color:#72509f}
.example-outcomes{display:grid;gap:2px}
.example-outcomes strong{display:flex;align-items:center;gap:4px;font-size:.76rem;white-space:nowrap}
.example-outcomes svg{width:16px;height:16px;stroke:#72509f;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.map-question{left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 30px);min-height:70px;background:white;flex-direction:row;align-items:center;gap:10px;padding:11px 13px;box-shadow:0 5px 15px #14284608}
.map-question .map-step{font-size:.46rem;margin-bottom:4px;color:#667b91}
.question-symbol{width:31px;height:34px;border-radius:12px 12px 12px 3px;display:grid;place-items:center;background:#eee8f9;color:#7955b1;font-size:1.5rem;font-weight:750;flex-shrink:0}
.map-question>svg{fill:none;stroke:#008c95;stroke-width:1.8;width:20px;margin-left:auto;flex-shrink:0}
.map-relations.is-current{border:2px solid #008c95;padding:12px 11px;box-shadow:0 0 0 4px #008c950c}
.map-example.is-current{border:2px solid #8863bb;padding:12px 11px;box-shadow:0 0 0 4px #9274cc12}
.map-question.is-current{border:2px solid #142846;padding:10px 12px;box-shadow:0 0 0 4px #1428460c}
.map-concept.is-current{box-shadow:0 0 0 4px #008c9512,0 7px 18px #00778025}
.map-reading{display:flex;align-items:flex-start;gap:10px;background:#eaf6f6;border-radius:10px;padding:15px 13px;min-height:119px;color:#24495c;transition:background .2s}
.reading-marker{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#007780;color:white;font-size:.6rem;font-weight:750;line-height:1}
.reading-panel>b{font-size:.77rem;line-height:1.4;display:block;color:#142846;letter-spacing:-.01em}
.reading-panel>p{font-size:.77rem;line-height:1.6;margin-top:5px}
.map-reading[data-reading="2"]{background:#f0ebf8}
.map-reading[data-reading="2"] .reading-marker{background:#7955b1}
.map-reading[data-reading="3"]{background:#edf1f7}
.map-reading[data-reading="3"] .reading-marker{background:#142846}
.map-progress{display:flex;justify-content:center;gap:5px;margin-top:16px}
.map-progress span{height:3px;width:18px;background:#dce7ed;border-radius:3px;transition:background .2s,width .2s}
.map-progress .is-current{width:32px;background:#008c95}
.visual-method-page .demo-illustrative{margin-top:10px;font-size:.54rem}
.method-demo .method-tab.active{border-left:3px solid #007780;padding-left:12px}
.method-demo[data-active="2"] .method-tab.active{border-left-color:#8863bb}
.method-demo[data-active="3"] .method-tab.active{border-left-color:#142846}
@media(max-width:359px){.method-demo .visual-method-page{padding-inline:14px}.visual-method-page .demo-page-top{font-size:.39rem}.map-card{padding-inline:9px}.map-card .map-step{font-size:.44rem}.map-card strong{font-size:.72rem}.map-root-content strong{font-size:.95rem}.map-concept{width:192px}.map-question{width:100%;gap:7px;padding-inline:10px}.map-question .map-step{font-size:.4rem}.map-question>svg{width:16px}.map-question.is-current{padding-inline:9px}.map-card-note{font-size:.56rem}.map-relations.is-current,.map-example.is-current{padding-inline:8px}.reading-panel>p{font-size:.7rem}}
@media(min-width:700px){.method-demo .visual-method-page{padding:28px 28px 22px}.visual-method-map{margin-top:26px}.map-card strong{font-size:.85rem}.map-concept{width:230px}.map-root-content strong{font-size:1.08rem}.map-card .map-step{font-size:.52rem}.map-question .map-step{font-size:.48rem}.map-reading{min-height:126px}.reading-panel>p{font-size:.77rem}.reading-panel>b{font-size:.82rem}}
@media(min-width:1000px){.method-demo{gap:60px;grid-template-columns:1.08fr 1fr}.method-demo .visual-method-page{max-width:510px}.visual-method-page h3{font-size:1.7rem}.map-card-note{font-size:.68rem}.map-relations,.map-example{padding-inline:15px}.map-relations.is-current,.map-example.is-current{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.method-demo *{animation:none!important;transition:none!important}}

/* The repeated benefit list was removed; close its former spacing. */
.method-demo{margin-bottom:0}