/* A focused website illustration; the native product screenshots remain above. */
.solution-section{max-width:1240px;margin:0 auto;padding:112px 40px 105px;color:#25372d;scroll-margin-top:85px}
.solution-layout{display:grid;grid-template-columns:.85fr 1.4fr;gap:54px;align-items:center}
.solution-copy{padding:20px 0}
.solution-eyebrow{font:500 9px/1.6 var(--sans);letter-spacing:1.7px;color:#698072;margin:0 0 24px}
.solution-copy h2{font:400 clamp(31px,3.2vw,43px)/1.13 Georgia,serif;letter-spacing:-1.4px;margin:0 0 25px;color:#253b2e}
.solution-copy h2 em{font-weight:400;color:#698372}
.solution-description{font:14px/1.9 var(--sans);color:#657069;max-width:310px;margin:0}
.solution-aside{display:flex;gap:15px;align-items:center;margin-top:46px;color:#748176}
.solution-aside-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid #dce3db;border-radius:10px;font:20px var(--sans);box-shadow:inset 0 1px white,0 2px 3px #263d2910;background:linear-gradient(#fff,#f2f5ef)}
.solution-aside p{font:11px/1.6 var(--sans);margin:0}
.solution-frame{padding:10px;background:#fff;border:1px solid #edf0eb;border-radius:28px;box-shadow:0 8px 35px #233b2708;min-width:0}
.solution-canvas{padding:23px 23px 17px;border-radius:20px;border:1px solid #e0e5dd;background-color:#f1f3ef;background-image:radial-gradient(#bec9bc70 .65px,transparent .65px);background-size:15px 15px;box-shadow:inset 0 2px 5px #21312305}
.solution-toolbar{display:flex;justify-content:space-between;gap:15px;font:10px var(--sans);color:#647368;align-items:center}
.solution-toolbar>span:first-child{display:flex;gap:8px;align-items:center}
.solution-toolbar svg{width:13px;height:17px}.solution-example-label{font-size:9px;color:#788279}
.solution-map{padding:37px 0 30px}
.solution-root{position:relative;max-width:285px;margin:0 auto;padding:23px 25px 15px;background:linear-gradient(145deg,#fff,#f3f7ef);border:1px solid #aac3a7;border-radius:14px;box-shadow:inset 0 1px 1px #fff,0 3px 0 -1px #d8e2d2,0 10px 17px -8px #2340262c}
.solution-card-label{font:500 8px/1.4 var(--sans);letter-spacing:1.2px;color:#608067;display:flex;align-items:center;gap:6px}
.solution-card-label i{width:5px;height:5px;background:#719872;border-radius:50%}
.solution-root h3{font:400 24px/1.2 Georgia,serif;color:#294230;letter-spacing:-.4px;margin:17px 0 20px}
.solution-root-foot{font:9px var(--sans);color:#839080;display:flex;align-items:center;justify-content:space-between}
.solution-root-foot>span{font-size:14px;color:#63816b}
.solution-root:after{content:'';position:absolute;height:28px;width:1px;background:#9aafa1;left:50%;top:calc(100% + 2px)}
.solution-branches{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:16px;padding-top:55px;position:relative}
.solution-branches:before{content:'';position:absolute;height:1px;top:28px;left:calc(25% - 4px);right:calc(25% - 4px);background:#a9bdc6}
.solution-branch{position:relative;min-width:0;border:1px solid #c5d2d7;background:linear-gradient(150deg,#fff,#f5f8f9);border-radius:12px;box-shadow:inset 0 1px white,0 3px 0 -1px #dfe6e7,0 9px 13px -8px #25353e22;transition:border-color .2s,box-shadow .2s}
.solution-branch:before{content:'';position:absolute;height:27px;width:1px;bottom:100%;left:50%;background:#a9bdc6}
.solution-branch summary{list-style:none;cursor:pointer;padding:19px 17px 13px;border-radius:11px;position:relative}
.solution-branch summary::-webkit-details-marker{display:none}
.solution-branch summary:hover{background:#eff6fa88}
.solution-branch summary:active{background:#e9f1f5}
.solution-branch summary:focus-visible{outline:3px solid #87adbd;outline-offset:4px}
.solution-branch .solution-card-label{color:#6c8c9d;font-size:7px}
.solution-question{display:block;font:400 18px/1.3 Georgia,serif;letter-spacing:-.25px;margin:16px 0 23px;color:#354c58;min-height:47px}
.solution-open-label{display:flex;align-items:center;justify-content:space-between;font:9px var(--sans);color:#7d929b;gap:5px}
.solution-plus{display:grid;place-items:center;width:22px;height:22px;border:1px solid #d3dfe3;border-radius:7px;background:linear-gradient(#fff,#edf2f4);box-shadow:inset 0 1px white,0 1px 2px #0000000d;font-size:15px;color:#58788a;transition:transform .2s}
.solution-close{display:none}.solution-branch[open] .solution-read{display:none}.solution-branch[open] .solution-close{display:inline}.solution-branch[open] .solution-plus{transform:rotate(45deg)}
.solution-branch[open]{border-color:#7d9eaf;box-shadow:inset 0 1px white,0 3px 0 -1px #c8d8df,0 12px 20px -8px #25353e33}
.solution-branch[open]:before{background:#7398ac;width:2px}
.solution-answer{border-top:1px solid #dce5e9;padding:15px 17px 18px;animation:solution-reveal .22s ease-out}
.solution-answer p{font:12px/1.75 var(--sans);color:#5c7079;margin:0 0 14px}
.solution-answer-end{font:10px/1.6 var(--sans);color:#788b92;display:block}
.solution-canvas-footer{display:flex;flex-direction:column;gap:12px;align-items:center;font:8px var(--sans);color:#8a968b}
.solution-tip{font-size:10px;color:#708575}.solution-tip>span{margin-right:5px}
@keyframes solution-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(min-width:761px){.solution-canvas{min-height:520px}.solution-layout{align-items:start}.solution-copy{padding-top:84px}}
@media(max-width:1000px){.solution-section{padding-left:28px;padding-right:28px}.solution-layout{gap:27px;grid-template-columns:.8fr 1.4fr}.solution-canvas{padding:20px 15px 17px}.solution-branch summary{padding-left:12px;padding-right:12px}.solution-question{font-size:17px}}
@media(max-width:760px){.solution-section{padding:65px 20px}.solution-layout{grid-template-columns:1fr;gap:30px}.solution-copy{padding:0 7px}.solution-copy h2{font-size:36px}.solution-description{max-width:420px}.solution-aside{margin-top:25px}.solution-frame{padding:7px;border-radius:24px}.solution-canvas{padding:20px 14px 17px}.solution-root{max-width:255px}.solution-map{padding-top:30px}.solution-branches{gap:12px}.solution-question{font-size:16px}.solution-question br{display:none}.solution-open-label{font-size:8px}.solution-answer{padding:13px 11px}.solution-answer p{font-size:11px}}
@media(max-width:380px){.solution-section{padding-left:12px;padding-right:12px}.solution-canvas{padding-left:10px;padding-right:10px}.solution-branches{gap:9px}.solution-question{font-size:15px}.solution-branch summary{padding:17px 10px 12px}.solution-plus{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.solution-answer{animation:none}.solution-branch,.solution-plus{transition:none}}

/* Explore uses the app's white question cards and authored connections. */
#how-it-works .solution-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:32px}
#how-it-works .solution-copy h2 em{color:#206e44}
#how-it-works .solution-description{max-width:370px;color:#555d53}
.compact-explore{width:100%;max-width:none;justify-self:end;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.compact-canvas{padding:15px;border:1px solid #dededb;border-radius:18px;background-color:#fafbf8;background-image:radial-gradient(#d5d8d0 1px,transparent 1px);background-size:17px 17px}
.compact-map{position:relative;height:260px;margin-bottom:16px}
.map-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#307df6;stroke-width:2.5;stroke-linecap:round}
.map-connections .tangent-line{stroke:#b64737;stroke-dasharray:5 6}
.map-forks,.map-path{display:contents}
.map-question{position:absolute;width:28%;min-height:92px;padding:12px;text-align:left;border:1px solid #dededc;border-radius:13px;background:#fff;color:#20271f;font:400 16px/1.2 Georgia,serif;box-shadow:0 1px 2px #00000013;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.map-question>span{display:table;background:#137e3c;color:white;border-radius:4px;padding:4px 6px;margin-bottom:9px;font:600 7px/1.2 monospace;letter-spacing:.65px}
.map-root{left:0;top:84px}.map-followup{left:37%;top:16px}.map-deeper{left:72%;top:16px}.map-tangent{left:37%;top:159px}
.map-followup>span,.map-deeper>span{background:#2878ed}.map-tangent>span{background:#ad4535}
.map-question:hover{box-shadow:0 3px 10px #00000010;border-color:#9da69d}
.map-question[aria-pressed=true]{border-color:#187c40;box-shadow:0 0 0 1px #187c40}
.map-followup[aria-pressed=true],.map-deeper[aria-pressed=true]{border-color:#2878ed;box-shadow:0 0 0 1px #2878ed}
.map-tangent[aria-pressed=true]{border-color:#ad4535;box-shadow:0 0 0 1px #ad4535}
.map-question:focus-visible{outline:2px solid #222;outline-offset:4px}
.compact-answer{height:156px;padding:19px 20px;background:#fff;border:1px solid #dededb;border-radius:13px;overflow:auto}
.compact-answer>span{font:11px/1.4 var(--sans);color:#62685e}.compact-answer h3{font:400 22px/1.2 Georgia,serif;color:#20271f;margin:10px 0 14px}.compact-answer p{font:13px/1.65 var(--sans);color:#454c42;margin:0}
.compact-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;font:9px/1.5 var(--sans);color:#737b6d}.compact-footer .workflow-replay{font-size:9px}
.explore-legend{margin-top:34px;display:grid;gap:20px}.explore-legend>div{display:flex;gap:15px;align-items:center}.legend-symbol{width:29px;flex-shrink:0;height:0;border-top:2px solid #2878ed}.tangent-symbol{border-top:2px dashed #ad4535}.explore-legend p{font:13px/1.6 var(--sans);color:#444b40;margin:0}.explore-legend strong{font-weight:600;color:#20271f;margin-right:4px}
@media(max-width:1000px){#how-it-works .solution-layout{gap:30px;grid-template-columns:1fr 1.15fr}.map-question{font-size:13px;padding:9px}.map-question>span{font-size:6px;padding:4px}.compact-answer{height:195px;padding:15px}.compact-answer h3{font-size:19px}}
@media(max-width:760px){#how-it-works .solution-layout{grid-template-columns:1fr;gap:30px}.compact-explore{max-width:none}.compact-canvas{padding:12px}.map-question{font-size:13px}.compact-answer{height:210px}.explore-legend{margin-top:25px;gap:15px}}
@media(prefers-reduced-motion:reduce){.map-question{transition:none}}

.compact-canvas{position:relative;isolation:isolate}
.explore-answer-context{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:11px/1.4 var(--sans);color:#62685e}
#explore-answer-badge{display:inline-block;padding:5px 7px;border-radius:4px;background:#137e3c;color:white;font:600 8px/1.2 monospace;letter-spacing:.6px}
.compact-answer[data-subject=caesar] #explore-answer-badge,.compact-answer[data-subject=army] #explore-answer-badge{background:#2878ed}
.compact-answer[data-subject=athens] #explore-answer-badge{background:#ad4535}

/* Reveal each authored connection before its question; keep layout fixed. */
.map-question{transition:opacity .4s ease,visibility .4s,border-color .18s,box-shadow .18s}
.map-question.sequence-pending{opacity:0;visibility:hidden;pointer-events:none}
.map-connections path{clip-path:inset(0 0 0 0);transition:clip-path 1.5s ease-in-out}
.map-connections path.sequence-pending{clip-path:inset(0 100% 0 0)}
@media(prefers-reduced-motion:reduce){.map-question,.map-connections path{transition:none}}

.map-connections path:not(:first-child){transition-duration:2s}

#how-it-works .explore-legend>div{align-items:flex-start}
#how-it-works .legend-symbol{margin-top:10px}
#how-it-works .explore-legend strong{display:block;margin-bottom:5px}

/* Focus is a small physical lift; hidden sequence cards remain hidden. */
.map-question{transition:opacity .4s ease,visibility .4s,border-color .18s,box-shadow .25s,transform .25s}
.map-question[aria-pressed=false]:not(.sequence-pending){opacity:.76}
.map-question[aria-pressed=false]:not(.sequence-pending):hover{opacity:1}
.map-question[aria-pressed=true]{transform:translateY(-3px);z-index:1;box-shadow:0 0 0 1px #187c40,0 7px 15px #203c241a}
.map-followup[aria-pressed=true],.map-deeper[aria-pressed=true]{box-shadow:0 0 0 1px #2878ed,0 7px 15px #25486d20}
.map-tangent[aria-pressed=true]{box-shadow:0 0 0 1px #ad4535,0 7px 15px #67382b20}
.map-connections path.branch-pulse{clip-path:none;transition:none;stroke:#9dceff;stroke-width:4;stroke-dasharray:12 100;filter:drop-shadow(0 0 3px #4b9dff);pointer-events:none}
.map-connections path.branch-pulse-tangent{stroke:#f0b0a0;filter:drop-shadow(0 0 3px #d66e56)}
@media(prefers-reduced-motion:reduce){.map-question{transition:none}.map-question[aria-pressed=true]{transform:none}}