/* A short gallery first; a clearly contrasted comparison on demand. */
#usages .filters{margin-bottom:18px;gap:9px;display:flex;flex-wrap:wrap}#usages .filters button{font-size:14px;min-height:44px;border-radius:24px;padding:10px 18px}.cases-guidance{font-size:14px;color:#526273;line-height:1.7;margin:0 0 24px}.cases-guidance strong{font-weight:500;color:#071a33}#case-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}#case-list .case{border:1px solid #d4dfd9;border-radius:12px;background:white;min-width:0;overflow:hidden;margin:0;padding:0}#case-list .case[hidden]{display:none!important}#case-list .case>summary{display:grid;grid-template-columns:32px minmax(0,1fr) 22px;grid-template-rows:auto auto;gap:13px 15px;align-items:start;padding:25px 24px;min-height:158px;list-style:none;cursor:pointer}#case-list .case>summary::-webkit-details-marker{display:none}#case-list .case-number{grid-column:1;grid-row:1;display:grid;place-items:center;width:30px;height:30px;background:#f0f5f2;border-radius:50%;font-size:12px;color:#24765b;margin:0}#case-list .case-title-block{grid-column:2;grid-row:1;min-width:0}#case-list .case-title-block>strong{display:block}#case-list .case-tag{display:none}#case-list .case-open-label{grid-column:2;grid-row:2;display:block;font-size:13px;color:#24765b;font-weight:500;align-self:end}#case-list .expand{grid-column:3;grid-row:1;font-size:23px;line-height:1.3;color:#24765b;margin:0}#case-list .case>summary:hover{background:#fafcfb}#case-list .case>summary:focus-visible{outline:3px solid #42b883;outline-offset:-4px}#case-list .case[open]{grid-column:1/-1;border-color:#94b7a5;box-shadow:0 12px 30px #071a3307}#case-list .case[open]>summary{min-height:0;border-bottom:1px solid #dce5df;grid-template-rows:auto;padding-block:23px}#case-list .case[open] .case-open-label{display:none}#case-list .case-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:24px;margin:0}#case-list .case-body>.case-pain,#case-list .case-body>.case-solution{padding:27px;border-radius:9px;min-width:0}#case-list .case-body>.case-pain{background:#f4f6f7;border:1px solid #dce2e6}#case-list .case-body>.case-solution{background:#071a33;color:white;border:1px solid #071a33}#case-list .case-body h4{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#526273}#case-list .case-body h4>span{}#case-list .case-solution h4{color:#78d6a5}#case-list .case-panel-intent{display:block;margin-bottom:15px;}#case-list .case-body .case-pain p,#case-list .case-body .case-solution p{margin:0;color:#526273}#case-list .case-body .case-solution p{color:#e0e9ef}#case-list .case-body .gain{grid-column:1/-1;display:flex;align-items:flex-start;gap:13px;color:#24765b;padding:0;margin:0}#case-list .gain>span:first-child{font-size:27px;line-height:1.5}#case-list .gain small{display:block;font-size:11px;letter-spacing:.8px;line-height:1.5;margin:0 0 6px;color:#526273;font-weight:500}#case-list .case-body>label{grid-column:1/-1;display:flex;align-items:center;gap:11px;border-top:1px solid #e3e9e6;padding-top:17px;margin:0;min-height:48px}#case-list .case-body input{width:21px;height:21px;accent-color:#24765b;margin:0;flex-shrink:0}.cases-discover{display:flex;align-items:center;justify-content:center;gap:22px;min-height:49px;border:1px solid #bccfc3;border-radius:6px;padding:13px 23px;background:white;color:#24765b;font:500 14px 'DM Sans',sans-serif;margin:25px auto 0;cursor:pointer}.cases-discover[hidden]{display:none}.cases-discover>span{font-size:20px}.cases-discover:hover{background:#f4f8f5}.cases-discover:focus-visible{outline:3px solid #42b883;outline-offset:4px}
@media(max-width:640px){#usages .filters button{font-size:13px;padding:10px 13px}.cases-guidance{font-size:15px;margin-bottom:20px}.cases-guidance strong{display:block;margin-top:5px}#case-list{grid-template-columns:1fr;gap:15px}#case-list .case>summary{padding:21px 18px;min-height:138px;gap:12px}#case-list .case-title-block>strong{}#case-list .case-open-label{font-size:14px}#case-list .case[open]>summary{padding:21px 18px}#case-list .case-body{grid-template-columns:1fr;padding:14px;gap:15px}#case-list .case-body>.case-pain,#case-list .case-body>.case-solution{padding:22px 19px}#case-list .case-panel-intent{}#case-list .case-body h4{margin-bottom:16px}#case-list .case-body .case-pain p,#case-list .case-body .case-solution p{}#case-list .case-body .gain{padding:6px 6px 0}#case-list .case-body>label{padding:17px 5px 4px}.cases-discover{width:100%;font-size:15px;gap:14px;padding-inline:15px}.selection-bar{flex-wrap:wrap;gap:12px}}
/* Read each example as short, icon-led units{list-style:none;display:grid;gap:0;padding:0;margin:0} with explicit contrast. */
#case-list .case-reading-steps{list-style:none;display:grid;gap:0;padding:0;margin:0}#case-list .case-reading-steps>li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:13px;padding:18px 0;margin:0;border-top:1px solid #071a3312}#case-list .case-reading-steps>li:first-child{border-top:0;padding-top:0}#case-list .case-reading-steps>li:last-child{padding-bottom:0}#case-list .case-step-icon{display:grid;place-items:center;width:30px;height:33px;border-radius:8px;background:#e5eaed;color:#526273}#case-list .case-step-icon svg{width:20px;height:20px}#case-list .case-body .case-reading-steps p{margin:0;color:#526273}#case-list .case-reading-steps strong{color:#071a33}#case-list .case-step-title{display:block;margin:0 0 7px}#case-list .case-body>.case-solution{color:#fff}#case-list .case-solution .case-panel-intent,#case-list .case-solution .case-reading-steps strong,#case-list .case-solution .case-step-title{color:#fff!important}#case-list .case-body .case-solution .case-reading-steps p{color:#dce6ee!important}#case-list .case-solution .case-reading-steps>li{border-color:#ffffff20}#case-list .case-solution .case-step-icon{background:#42b88320;color:#78d6a5}#case-list .case-solution h4{color:#78d6a5!important}#case-list .case-panel-intent{margin-bottom:24px}#case-list .case-body>.case-pain,#case-list .case-body>.case-solution{padding:25px}#case-list .case-body h4{margin-bottom:12px}#case-list .case-body .gain{padding:7px 3px}#case-list .case-body .gain small{}
@media(max-width:640px){#case-list .case-body>.case-pain,#case-list .case-body>.case-solution{padding:23px 18px}#case-list .case-panel-intent{margin-bottom:23px}#case-list .case-reading-steps>li{grid-template-columns:28px minmax(0,1fr);gap:11px;padding:17px 0}#case-list .case-step-icon{width:28px;height:32px}#case-list .case-step-icon svg{width:19px;height:19px}#case-list .case-body .case-reading-steps p{}}