[data-capabilities-panel][hidden] { display: none !important; }
.jq-capabilities-shell { scroll-margin-top: 85px; border-top: 1px solid #eee7e1; }
.jq-capabilities-comparison { border-bottom-color: #eee7e1; }
.jq-capabilities ol.jq-list { list-style: none; padding: 0; }
/* Use the original Work Sans h2/h3/p scale from joqra.css. */
.jq-capabilities-b { background: white; padding: 6rem 2rem; }
.jq-cap-b-container { width: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr 1.6fr; align-items: start; gap: 3rem; }
.jq-cap-b-container > * { min-width: 0; }
.jq-cap-b-heading h2 { margin-bottom: 1rem; }
.jq-cap-b-heading > p { max-width: 420px; }
.jq-cap-illustration { max-width: 320px; margin-block: 1rem; }
.jq-cap-illustration svg { width: 100%; height: auto; display: block; }
.jq-cap-intro-note { color: var(--clr-muted); }
.jq-cap-b-heading .jq-btn { margin-top: .75rem; }
.jq-route-section-label { margin-bottom: 1.5rem; }
/* Independent practices section follows the hero in mode B. */
.jq-practices-standalone { padding: 5rem 2rem; background: white; border-bottom: 1px solid #eee7e1; scroll-margin-top: 85px; }
.jq-practices-container { width: 100%; margin-inline: auto; }
.jq-practices-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2rem; }
.jq-practices-heading > p { max-width: 470px; padding: 0; }
.jq-practice-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.jq-practice-link { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 14px; align-items: center; gap: .75rem; min-height: 94px; padding: 1.15rem 1.25rem; border: 1px solid #eee7e0; border-radius: 7px; background: white; transition: border-color .15s, background .15s; }
.jq-practice-link:hover { border-color: #b99981; background: #fcfaf7; }
.jq-practice-link strong { font-size: .9375rem; line-height: 1.6; font-weight: 400; color: var(--clr-text); }
.jq-practice-link > span:last-child { color: #89644b; }
.jq-practice-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 7px; color: #876047; background: #f6f0e9; }
.jq-practice-icon svg { width: 28px; height: 28px; }
.jq-practice-link:nth-child(3n+2) .jq-practice-icon { color: #566f6b; background: #edf3f0; }
.jq-practice-link:nth-child(3n) .jq-practice-icon { color: #80673d; background: #f7f2e6; }
.jq-route-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); border: 1px solid #e7ded7; border-radius: 10px; overflow: hidden; }
.jq-route-stages { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #fcfaf8; border-right: 1px solid #e7ded7; }
.jq-route-stage { min-width: 0; display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .4rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--clr-text); font-family: var(--font); text-align: left; cursor: pointer; }
.jq-route-stage:hover { background: #f5eee8; }
.jq-route-stage[aria-pressed="true"] { background: white; border-color: #b89680; }
.jq-route-index { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #d8c5b5; background: white; color: #795b44; border-radius: 50%; font-size: .72rem; }
.jq-route-stage[aria-pressed="true"] .jq-route-index { color: white; background: #6c4434; border-color: #6c4434; }
.jq-route-stage > span:nth-child(2) { min-width: 0; }
.jq-route-stage strong { display: block; font-size: .9375rem; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.jq-route-stage small { display: block; font-size: .8125rem; line-height: 1.5; color: #736154; margin-top: .15rem; }
.jq-route-arrow { display: none; }
.jq-route-detail { padding: 1.25rem; }
.jq-route-detail-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .85rem; }
.jq-route-detail-top > span:first-child { font-size: .72rem; letter-spacing: .1em; color: #75604e; }
.jq-route-detail-top > span:last-child { color: #925d3e; font-size: 1.35rem; line-height: 1; }
.jq-route-instrument { display: inline-block; font-size: .8125rem; color: #79533c; background: #f7f1eb; padding: .2rem .5rem; border-radius: 4px; margin-bottom: .65rem; }
.jq-route-detail h4 { margin-bottom: 1rem; }
.jq-route-purpose > span, .jq-route-deliverable > span { font-size: .72rem; letter-spacing: .1em; font-weight: 600; color: #75604e; }
.jq-route-purpose p, .jq-route-deliverable p { font-size: .9375rem; line-height: 1.6; padding: 0; margin-top: .5rem; color: var(--clr-text); }
.jq-route-deliverable { padding: .85rem; margin-block: 1rem; background: #faf7f3; border: 1px solid #ece1d6; border-radius: 7px; }
.jq-route-detail .jq-ade-text-link { font-size: .8125rem; line-height: 1.6; }
.jq-route-note { font-size: .8125rem; color: var(--clr-muted); padding: 0; margin-top: 1rem; }
.jq-practice-link:focus-visible, .jq-route-stage:focus-visible { outline: 3px solid #a75b45; outline-offset: 3px; }
@media (max-width: 1250px) {
  .jq-cap-b-container { gap: 2rem; grid-template-columns: 1fr 1.6fr; }
  .jq-route-board { display: block; }
  .jq-route-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid #e7ded7; }
}
@media (max-width: 1100px) {
  .jq-cap-b-container { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .jq-practice-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jq-cap-b-heading { grid-column: 1 / -1; max-width: 680px; }
  .jq-cap-b-heading > p { max-width: 620px; }
  .jq-cap-illustration { display: none; }
  .jq-route-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .jq-capabilities-b { padding: 3rem 1.5rem; }
  .jq-practices-standalone { padding: 3rem 1.5rem; }
  .jq-practices-heading { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .jq-practice-links { grid-template-columns: minmax(0, 1fr); }
  .jq-cap-b-container { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .jq-cap-b-heading { grid-column: auto; }
  .jq-route-stage { padding-inline: .3rem; }
  .jq-route-detail { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .jq-practice-link { transition: none; } }

/* Full-width method: four steps above an open evidence and deliverable panel. */
.jq-cap-b-container { display:block; }
.jq-cap-b-heading { display:grid; grid-template-columns:1.15fr 1fr auto; gap:2.5rem; align-items:center; max-width:none; padding-bottom:2.5rem; margin-bottom:3rem; border-bottom:1px solid #eee7e1; }
.jq-cap-b-heading h2 { margin:0; }
.jq-cap-b-heading > p { max-width:none; padding:0; }
.jq-cap-b-heading .jq-btn { margin:0; white-space:nowrap; }
.jq-route-section { width:100%; }
.jq-route-section-label { margin-bottom:2rem; }
.jq-route-board { display:block; border-radius:12px; }
.jq-route-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:16px; border-right:0; border-bottom:1px solid #e7ded7; }
.jq-route-stage { align-items:center; padding:20px 16px; gap:14px; }
.jq-route-index { width:36px; height:36px; }
.jq-route-arrow { display:block; margin-left:auto; color:#9b7a64; }
.jq-route-detail { display:grid; grid-template-columns:.8fr 1fr 1.2fr; gap:12px 40px; padding:32px; align-items:start; }
.jq-route-detail-top { grid-column:1/-1; margin-bottom:12px; }
.jq-route-instrument { grid-column:1; grid-row:2; justify-self:start; }
.jq-route-detail h4 { grid-column:1; grid-row:3; margin:0; }
.jq-route-purpose { grid-column:2; grid-row:2/4; }
.jq-route-deliverable { grid-column:3; grid-row:2/5; padding:20px; margin:0; }
.jq-route-detail .jq-ade-text-link { grid-column:1/3; margin-top:16px; }
@media(max-width:1100px) {
 .jq-cap-b-heading { grid-template-columns:1fr 1fr; gap:24px; }
 .jq-cap-b-heading .jq-btn { justify-self:start; }
 .jq-route-stages { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .jq-route-detail { gap:12px 24px; grid-template-columns:1fr 1fr; }
 .jq-route-purpose { grid-column:2; }
 .jq-route-deliverable { grid-column:1/-1; grid-row:auto; margin-top:12px; }
}
@media(max-width:700px) {
 .jq-cap-b-heading { grid-template-columns:1fr; gap:20px; }
 .jq-route-stages { padding:10px; gap:8px; }
 .jq-route-stage { padding:14px 8px; gap:8px; align-items:flex-start; }
 .jq-route-index { width:26px; height:26px; }
 .jq-route-arrow { display:none; }
 .jq-route-detail { display:block; padding:24px 20px; }
 .jq-route-detail h4 { margin-bottom:20px; }
 .jq-route-purpose { margin-bottom:20px; }
 .jq-route-deliverable { margin:0 0 20px; }
}