/* Project pixels keep their own palette. Captions belong to the studio interface. */
html body.case-study-page.clear-case.case-components .page-main figure figcaption:not(.sr-only){position:relative;inset:auto;display:flex!important;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px!important;margin:0!important;width:100%;box-sizing:border-box;background:#fff!important;color:#4e5852!important;font-size:14px;line-height:1.7;text-align:left;border-top:1px solid #e9ece8}
html body.case-study-page.clear-case.case-components .page-main figure figcaption:not(.sr-only) :is(p,strong,span,small,.cs-caption__body){color:inherit}
html body.case-study-page.clear-case.case-components .page-main figure figcaption:not(.sr-only) strong{color:#272e29!important}
html body.case-study-page.clear-case.case-components .page-main figure figcaption:not(.sr-only) .cs-caption__body{flex:1;min-width:0;max-width:76ch}
html body.case-study-page.clear-case.case-components .page-main figure figcaption:not(.sr-only) :is(p,.cs-caption__body){margin:0}
html body.case-study-page.clear-case.case-components .page-main .cq-explore{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;flex:none;padding:10px 16px;border:1px solid #dce1db;border-radius:999px;background:#f4f6f2;color:#272e29!important;font-size:13px;line-height:1.3;text-decoration:none;transition:background .2s,border-color .2s}
html body.case-study-page.clear-case.case-components .page-main .cq-explore:hover{background:#e5ecdf;border-color:#bdcbb4}
html body.case-study-page.clear-case.case-components .page-main .cq-explore:focus-visible{outline:2px solid #53634b;outline-offset:4px}
html body.case-study-page.clear-case.case-components figure[data-case-gallery] :is(img,svg[role="img"]){cursor:zoom-in}
html body.case-study-page.clear-case.case-components .cs-outcome--text{display:block;max-width:1160px}
html body.case-study-page.clear-case.case-components .cs-outcome--text .cs-outcome__copy{max-width:820px}
html body.case-study-page.clear-case.case-components .cs-outcome--text h2{max-width:28ch}
html body.case-study-page.clear-case.case-components .cq-detail{margin:0;overflow:hidden;border-radius:18px;background:#f1f3ef}
/* Walkthrough images use their native ratio, not the HTML export height at a narrower width. */
html body.case-study-page.clear-case.case-components .cq-detail>img{display:block;width:100%;height:auto;min-height:0;max-height:none;object-fit:contain}
html body.case-study-page.clear-case.case-components .cq-detail svg{display:block;width:100%;height:auto}
html body.case-study-page.clear-case.case-components .cq-source-pair{display:grid;grid-template-columns:1.45fr 1fr;gap:24px}
html body.case-study-page.clear-case.case-components .cq-source-pair .cq-detail{align-self:start}
html body.case-study-page.clear-case.case-components .cs-kingdom-decisions{display:grid;grid-template-columns:1.45fr 1fr;gap:24px}
html body.case-study-page.clear-case.case-components .cs-kingdom-decisions .cs-section-head{display:block;margin-bottom:30px}
html body.case-study-page.clear-case.case-components .cs-kingdom-decisions .cs-section-head h2{font-size:clamp(28px,3vw,42px)}
html body.case-study-page.clear-case.case-components .cs-kingdom-decisions .cs-section-head>p{margin-top:24px}
html body.case-study-page.clear-case.case-components .ds-motion-card>span{color:#34413b!important}
html body.case-study-page.clear-case.case-components .diagnox-question>span,html body.case-study-page.clear-case.case-components .diagnox-motion__grid article>span{color:#3453a2!important}
html body.case-study-page.clear-case.case-components .ss-campus-model article>span{color:#6b5217!important}
html body.case-study-page.clear-case.case-components .ss-comparison-copy>:is(span,small),
html body.case-study-page.clear-case.case-components .ss-module-head>small,
html body.case-study-page.clear-case.case-components .ss-proof-result small{color:#74521d!important}
html body.case-study-page.clear-case.case-components .diagnox-family-copy>span,
html body.case-study-page.clear-case.case-components .diagnox-parameter-tabs button>span,
html body.case-study-page.clear-case.case-components .diagnox-parameter-copy>span,
html body.case-study-page.clear-case.case-components .diagnox-anatomy-copy>span{color:#344e74!important}
html body.case-study-page.clear-case.case-components .diagnox-parameter-pills :is(span,button){color:#273b56!important}
html body.case-study-page.clear-case.case-components .figma-guide-label{color:#59616d!important}
html body.case-study-page.clear-case.case-components .figma-states span:first-child{background:#1262d5!important}
html body.case-study-page.clear-case.case-components .figma-states span:last-child{color:#555c66!important}
html body.case-study-page.clear-case.case-components .commerce-product__label strong{color:#f4f6fc!important}
html body.case-study-page.clear-case.case-components .commerce-addon small{color:#555d65!important}
html body.case-study-page.clear-case.case-components img[src*="icon-system.png"]{max-width:980px;margin:auto}
/* The EXO board is an index of intact frames, with readable detail on demand. */
html body.case-study-page.clear-case.case-components .figma-frame img{aspect-ratio:auto!important;object-fit:contain!important;transform:none!important}
html body.case-study-page.clear-case.case-components .figma-frame:before{display:none}
html body.case-study-page.clear-case.case-components .figma-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px!important}
html body.case-study-page.clear-case.case-components .figma-workspace{min-height:0!important}
html body.case-study-page.clear-case.case-components .figma-canvas{overflow:visible!important}
html body.case-study-page.clear-case.case-components .figma-canvas:after{display:none}
html body.case-study-page.clear-case.case-components .figma-board-head{min-width:0!important}
.case-explorer{inset:0;margin:auto;width:min(1440px,calc(100vw - 40px));height:calc(100dvh - 40px);max-width:none;max-height:none;padding:0;border:1px solid #d9ded7;border-radius:20px;background:#f4f5f1;color:#272e29;overflow:hidden;box-shadow:0 24px 80px #18251b40}
.case-explorer::backdrop{background:#18251bcc;backdrop-filter:blur(8px)}
.case-explorer[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.case-explorer,.case-explorer *{box-sizing:border-box}
.case-explorer__bar{position:relative;z-index:1;min-width:0;display:flex;align-items:center;gap:12px;padding:16px 22px;background:#fff;border-bottom:1px solid #e3e7de}
.case-explorer__title{min-width:0;flex:1;font:500 15px/1.5 Satoshi,Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.case-explorer__bar button,.case-explorer__bar a{font:500 13px/1.4 Satoshi,Inter,sans-serif;border:1px solid #dce1db;border-radius:999px;padding:10px 15px;background:#f4f6f2;color:#272e29;cursor:pointer;text-decoration:none;flex:none}
.case-explorer__bar button:hover,.case-explorer__bar a:hover{background:#e5ecdf}
.case-explorer__bar :is(button,a):focus-visible{outline:2px solid #53634b;outline-offset:3px}
.case-explorer__bar button[hidden]{display:none}
.case-explorer__count{font:13px/1.4 Inter,sans-serif;color:#4e5852}
.case-explorer__stage{position:relative;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px;display:block;text-align:center}
.case-explorer__image{position:static;display:block;max-width:100%;width:auto;height:auto;margin:0 auto;box-shadow:0 8px 28px #18251b12}
.case-explorer__stage.is-actual .case-explorer__image{max-width:none;margin:0}
.case-explorer.is-loading .case-explorer__image{opacity:.4}
body.case-explorer-open{overflow:hidden}
.cq-walkthrough{margin-top:40px}
.cq-walkthrough-controls{display:flex;align-items:center;gap:24px;border-bottom:1px solid #dce1d9;margin-bottom:34px}
.cq-walkthrough-controls[hidden]{display:none}
.cq-tabs{display:flex;flex:1;gap:30px;min-width:0}
.cq-tabs button{position:relative;display:flex;align-items:center;gap:12px;padding:20px 0 22px;min-width:0;border:0;background:none;color:#59645c;font:500 15px/1.5 Satoshi,Inter,sans-serif;text-align:left;cursor:pointer}
.cq-tabs button>span{font-size:11px;color:#59645c}
.cq-tabs button[aria-selected="true"]{color:#202b22}
.cq-tabs button i{position:absolute;inset:auto 0 -1px;height:2px;background:#d1dbc9;overflow:hidden}
.cq-tabs button i:after{content:'';display:block;width:100%;height:100%;background:#536c45;transform:scaleX(0);transform-origin:left}
.cq-walkthrough.is-playing .cq-tabs button[aria-selected="true"] i:after{transform:scaleX(var(--cq-progress,0))}
.cq-walkthrough.is-suspended .cq-tabs button i:after{animation-play-state:paused}
.cq-tabs button[aria-selected="true"] i:after{transform:scaleX(1)}
.cq-pause{border:1px solid #dce1d9;border-radius:999px;background:#f5f7f2;color:#29362c;padding:10px 16px;font:500 12px/1.4 Inter,sans-serif;white-space:nowrap;cursor:pointer}
.cq-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start;margin-bottom:48px}
.cq-panel[hidden]{display:none}
.cq-panel-copy h3{margin:0 0 20px;font:400 clamp(26px,3vw,38px)/1.2 Satoshi,Inter,sans-serif;letter-spacing:-.03em;color:#272e29}
.cq-panel-copy>p:not(.cs-eyebrow){margin:0;color:#58625a;font-size:16px;line-height:1.8}
.cq-editor{margin-top:28px;padding:22px 24px;border:1px solid #dce1d9;border-radius:16px;background:#f5f7f3}
.cq-editor-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid #dce1d9;font:500 13px/1.5 Inter,sans-serif}
.cq-editor-bar span{font-size:10px;letter-spacing:.06em;color:#59645c}
.cq-editor dl{margin:18px 0 0;display:grid;gap:16px}
.cq-editor dt{font:500 11px/1.5 Inter,sans-serif;color:#59645c;margin-bottom:6px}
.cq-editor dd{margin:0;padding:12px 14px;border:1px solid #e1e6dc;border-radius:7px;background:#fff;font:400 14px/1.5 Inter,sans-serif;color:#273a2c}
.cq-editor>p{margin:18px 0 0;color:#59645c;font:12px/1.6 Inter,sans-serif}
.cq-tabs button:focus-visible,.cq-pause:focus-visible{outline:2px solid #536c45;outline-offset:4px}
html body.booster-case .booster-dashboard .cq-walkthrough{grid-column:1/-1}
html body.booster-case #dashboard-ui{display:block}
html body.booster-case #dashboard-ui>.cs-chapter__copy{max-width:820px;margin-bottom:48px}
/* Match the two marketing source ratios instead of enlarging the smaller export. */
html body.case-components .page-main:has(.cs-product-journey) .case-showcase-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.435fr);gap:24px;align-items:start}
html body.case-components .page-main:has(.cs-product-journey) .case-showcase-grid>figure{grid-column:auto!important;min-width:0;width:100%;max-width:100%;margin:0}
html body.case-components .page-main:has(.cs-product-journey) .case-showcase-grid>figure:last-child{grid-column:1/-1!important}
html body.case-components .page-main:has(.cs-product-journey) .case-showcase-grid figcaption{flex-wrap:wrap}
html body.case-components .page-main:has(.cs-product-journey) .case-showcase-grid .cs-caption__body{flex-basis:100%}
@keyframes cq-timeline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:760px){
 html body.case-study-page.clear-case.case-components .page-main figure figcaption:not(.sr-only){padding:18px 20px!important;align-items:flex-start;flex-wrap:wrap;gap:14px;font-size:13px}
 html body.case-study-page.clear-case.case-components .page-main figure figcaption:not(.sr-only) .cs-caption__body{flex-basis:100%}
 html body.case-study-page.clear-case.case-components .cq-source-pair,html body.case-study-page.clear-case.case-components .cs-kingdom-decisions{grid-template-columns:1fr;gap:40px}
 html body.case-study-page.clear-case.case-components .figma-flow{min-width:0!important;grid-template-columns:1fr 1fr;gap:14px!important}
 html body.case-study-page.clear-case.case-components .figma-frame:nth-of-type(n+9){display:block!important}
 html body.case-study-page.clear-case.case-components .figma-guide-grid{grid-template-columns:1fr!important}
 html body.case-study-page.clear-case.case-components .figma-guide-head{display:block}
 html body.case-study-page.clear-case.case-components .figma-guide-head p{margin-top:12px}
 html body.case-study-page.clear-case.case-components .figma-guide{padding:20px!important}
 .case-explorer{width:100vw;height:100dvh;border:0;border-radius:0;margin:0}
 .case-explorer__bar{padding:12px 14px;gap:8px;flex-wrap:wrap}
 .case-explorer__title{flex:1 1 calc(100% - 90px);order:0}
 .case-explorer__close{order:1}
 .case-explorer__bar> :not(.case-explorer__title,.case-explorer__close){order:2}
 .case-explorer__stage{padding:16px}
 .case-explorer__bar button,.case-explorer__bar a{padding:8px 12px}
 .cq-walkthrough-controls{display:block;margin-bottom:26px}
 .cq-tabs{gap:24px;overflow-x:auto;padding:0 4px}
 .cq-tabs button{white-space:nowrap;font-size:13px}
 .cq-pause{margin:14px 0}
 .cq-panel{grid-template-columns:1fr;gap:28px}
 .cq-editor{padding:20px}
 html body.case-components .page-main:has(.cs-product-journey) .case-showcase-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cq-explore{transition:none!important}.cq-tabs button i:after{animation:none!important}}