/* CMUsed presentation, matched to the accepted Kumi and Glimpse case studies.
   Scoped here because cmused.css also supplies the other project pages. */
.cmused-case{
  --case-small:13px;
  --case-body:14px;
  --case-heading:18px;
  --case-section:32px;
  --case-display:40px;
  --case-rule:#d5d5d9;
}
.cmused-page .cmused-case p{font-size:var(--case-body);line-height:1.6;letter-spacing:0}
.cmused-page .cmused-case :is(h1,h2,h3){text-wrap:pretty}
.cmused-page .cmused-case .cm-head{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;margin-bottom:0}
.cmused-page .cmused-case .cm-head>:not(.cm-crumb){max-width:none}
.cmused-page .cmused-case .cm-crumb{margin-bottom:18px;padding:0;border:0;font:500 var(--case-body)/1.5 var(--cm-text);letter-spacing:0;text-transform:none}
.cmused-page .cmused-case .cm-crumb span{font-size:var(--case-small);color:#5c5c62}
.cmused-page .cmused-case .cm-head h1{margin:0;font-size:var(--case-display);font-weight:600;line-height:1.08;letter-spacing:-.03em}
.cmused-page .cmused-case .cm-lede{margin:0;max-width:none;color:#404044}
.cmused-page .cmused-case .cm-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px;margin:12px 0 0;padding:22px 0;max-width:none;border-top:1px solid var(--case-rule)}
.cmused-page .cmused-case .cm-facts div{display:block;padding:0;min-width:0}
.cmused-page .cmused-case .cm-facts dt{font:500 var(--case-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;color:#5c5c62}
.cmused-page .cmused-case .cm-facts dt:after{content:none}
.cmused-page .cmused-case .cm-facts dd{margin:7px 0 0;font-size:var(--case-small);line-height:1.5;color:#1d1d1f}

/* A single divider owns each major transition. */
.cmused-page .cmused-case .cm-section{margin-top:90px;padding-top:32px;border-top:1px solid var(--case-rule)}
.cmused-page .cmused-case .cm-section-head{margin-bottom:28px;padding:0;border:0}
.cmused-page .cmused-case .cm-section-head h2{font-size:var(--case-section);font-weight:550;line-height:1.2;letter-spacing:-.025em}
.cmused-page .cmused-case .cm-section-head p[data-cm-stamp]{margin:0 0 14px;padding:0;border:0;font:450 var(--case-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;color:#5c5c62}
.cmused-page .cmused-case .cm-sub{max-width:none;margin-top:48px}
.cmused-page .cmused-case .cm-sub h3{margin:0 0 12px;font-size:var(--case-heading);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.cmused-page .cmused-case .cm-intro{max-width:none;margin:0 0 28px}
.cmused-page .cmused-case .cm-prose{max-width:none;gap:32px}
.cmused-page .cmused-case .cm-vs-row p{min-height:0}
.cmused-page .cmused-case .cm-vs-row>div{padding-bottom:28px}
.cmused-page .cmused-case :is(.cm-vs-row b,.cm-steps b){font-size:var(--case-heading);font-weight:500;line-height:1.25;letter-spacing:-.02em}
.cmused-page .cmused-case .cm-steps{gap:40px 32px}
.cmused-page .cmused-case .cm-steps span{font:450 var(--case-small)/1.5 var(--cm-text);letter-spacing:0;color:#5c5c62}
.cmused-page .cmused-case .cm-steps p{max-width:none}

/* Remove added presentation panels, retaining device frames and screenshot crops. */
.cmused-page .cmused-case .pd-plate.cm-plate{aspect-ratio:auto;margin:32px 0 0;padding:0!important;background:transparent;border:0;box-shadow:none;overflow:visible}
.cmused-page .cmused-case :is(.cm-anatomy,.cm-phones){padding:0;background:transparent;border:0;box-shadow:none;margin-top:24px}
.cmused-page .cmused-case .cm-phones{gap:48px}
.cmused-page .cmused-case .cm-steps figure,.cmused-page .cmused-case .cm-sell figure{background:transparent;box-shadow:none}
.cmused-page .cmused-case .cm-phone figcaption{font:450 var(--case-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;color:#5c5c62}
.cmused-page .cmused-case .cm-anatomy-notes li{font-size:var(--case-small);line-height:1.5}

/* Keep the actual metrics prominent; quiet only their supporting labels. */
.cmused-page .cmused-case .cm-cell dt{font:500 var(--case-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;color:#5c5c62}
.cmused-page .cmused-case .cm-cell small{font-size:var(--case-small);line-height:1.5}
.cmused-page .cmused-case .cm-delta{font:500 var(--case-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none}
.cmused-page .cmused-case .cm-chart figcaption{font:500 var(--case-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;flex-wrap:wrap}
.cmused-page .cmused-case .cm-cat{font-size:var(--case-small);line-height:1.4}
.cmused-page .cmused-case .cm-chart li>b{font-size:var(--case-small);line-height:1.4}
.cmused-page .cmused-case .cm-tip{font-size:var(--case-small);line-height:1.4;letter-spacing:0}
.cmused-page .cmused-case .cm-end{font:450 var(--case-body)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;border-color:var(--case-rule)}

@media(max-width:760px){
  .cmused-case{--case-display:34px;--case-section:28px}
  .cmused-page .cmused-case .cm-crumb{margin-bottom:8px}
  .cmused-page .cmused-case .cm-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-top:8px}
  .cmused-page .cmused-case .cm-section{margin-top:64px;padding-top:25px}
  .cmused-page .cmused-case .cm-section-head{margin-bottom:24px}
  .cmused-page .cmused-case .cm-sub{margin-top:40px}
  .cmused-page .cmused-case .cm-steps{gap:32px}
  .cmused-page .cmused-case .cm-phones{gap:28px}
}
@media(max-width:640px){
  .cmused-page .cmused-case .cm-anatomy{grid-template-columns:minmax(0,1fr);gap:22px}
  .cmused-page .cmused-case .cm-anatomy-notes li{white-space:normal}
}

/* Restore white media panels and the breathing room around the product screens. */
.cmused-page .cmused-case .pd-plate.cm-plate{padding:clamp(24px,4vw,48px) 6%!important;background:#fff;border:1px solid rgba(29,29,31,.07);border-radius:14px}
.cmused-page .cmused-case :is(.cm-anatomy,.cm-phones){box-sizing:border-box;padding:clamp(34px,5vw,64px) 6%;background:#fff;border:1px solid rgba(29,29,31,.07);border-radius:14px}
.cmused-page .cmused-case .cm-phones{gap:clamp(24px,6vw,96px)}
.cmused-page .cmused-case .cm-steps figure{background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.1);border-radius:10px}
.cmused-page .cmused-case .cm-sell{box-sizing:border-box;padding:clamp(18px,3vw,32px);background:#fff;border:1px solid rgba(29,29,31,.07);border-radius:14px}
.cmused-page .cmused-case .cm-sell figure{background:#fff}
@media(max-width:640px){
 .cmused-page .cmused-case .cm-anatomy{padding:28px 20px}
 .cmused-page .cmused-case .pd-plate.cm-plate{padding:24px 12px!important}
}

/* Oct 19: the opening text and project facts match Kumi's and Glimpse's hierarchy:
   the paragraph at the intro's regular weight, labels over values, values in the same grey. */
.cmused-page .cmused-case .cm-head .cm-lede{font-weight:400}
.cmused-page .cmused-case .cm-head .cm-facts{gap:24px}
.cmused-page .cmused-case .cm-head .cm-facts dd{color:#6e6e73}
@media(max-width:760px){.cmused-page .cmused-case .cm-head .cm-facts{gap:20px 24px}}

/* Oct 20: "Reading the dashboard". Findings as subheads, each with a thin bar chart in the same
   ink and track as the Glimpse research charts. */
.cmused-page .cmused-case .cm-finding p{max-width:none;color:#404044}
.cmused-page .cmused-case .cm-funnel{display:grid;gap:12px;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--case-rule)}
.cmused-page .cmused-case .cm-funnel+.cm-funnel{margin-top:18px}
.cmused-page .cmused-case .cm-fr{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr) 128px;gap:16px;align-items:center}
.cmused-page .cmused-case .cm-fr-k{font:450 var(--case-small)/1.4 var(--cm-text);color:#5c5c62}
.cmused-page .cmused-case .cm-fr-bar{position:relative;display:block;height:10px;background:#e4e4e8}
.cmused-page .cmused-case .cm-fr-bar i{position:absolute;inset:0 auto 0 0;min-width:2px;background:#34343a}
.cmused-page .cmused-case .cm-fr.is-muted .cm-fr-bar i{background:#8a8a90}
.cmused-page .cmused-case .cm-fr-v{font:500 var(--case-small)/1.4 var(--cm-text);font-variant-numeric:tabular-nums;color:#1d1d1f;text-align:right;white-space:nowrap}
.cmused-page .cmused-case .cm-funnel figcaption{margin-top:2px;font:450 12px/1.45 var(--cm-text);color:#8a8a90}
.cmused-page .cmused-case .cm-unknowns{display:grid;gap:14px;margin:4px 0 0;padding:0;list-style:none}
.cmused-page .cmused-case .cm-unknowns li{padding-top:14px;border-top:1px solid var(--case-rule);font:450 var(--case-body)/1.6 var(--cm-text);color:#404044}
.cmused-page .cmused-case .cm-unknowns b{font-weight:600;color:#1d1d1f}
@media(max-width:640px){
  .cmused-page .cmused-case .cm-fr{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .cmused-page .cmused-case .cm-fr-bar{grid-column:1/-1;grid-row:2}
}

/* Oct 20: the data analysis folds under the four problems, opened like Glimpse's research details. */
.cmused-page .cmused-case .cm-data{margin-top:32px;border-top:1px solid var(--case-rule);border-bottom:1px solid var(--case-rule)}
.cmused-page .cmused-case .cm-data>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;cursor:pointer;list-style:none;font:500 var(--case-body)/1.5 var(--cm-text);color:#1d1d1f}
.cmused-page .cmused-case .cm-data>summary::-webkit-details-marker{display:none}
.cmused-page .cmused-case .cm-data>summary:after{content:'+';font-size:20px;line-height:1;color:#5c5c62}
.cmused-page .cmused-case .cm-data[open]>summary:after{content:'\2212'}
.cmused-page .cmused-case .cm-data>summary:focus-visible{outline:2px solid var(--cm-ink);outline-offset:4px}
.cmused-page .cmused-case .cm-data>.cm-intro{margin:8px 0 0}
.cmused-page .cmused-case .cm-data>.cm-finding:first-of-type{margin-top:32px}
.cmused-page .cmused-case .cm-data>:last-child{margin-bottom:36px}

/* Oct 20, v2: the analysis reads as a short report: a summary first, then findings, caveats, plan, measures. */
.cmused-page .cmused-case .cm-summary{padding:18px 20px;background:#fff;border:1px solid rgba(29,29,31,.07);border-radius:12px}
.cmused-page .cmused-case .cm-summary h3{margin-bottom:8px}
.cmused-page .cmused-case .cm-summary p{color:#1d1d1f}
.cmused-page .cmused-case .cm-data .cm-finding{margin-top:40px}
.cmused-page .cmused-case .cm-data .cm-summary{margin-top:28px}

/* Oct 20: the drop-down sits under the problem rows without its own divider lines, and the gap to the
   next section is tighter. */
.cmused-page .cmused-case .cm-data{margin-top:20px;border:0}
.cmused-page .cmused-case .cm-data>summary{min-height:40px}
.cmused-page .cmused-case .cm-data:not([open])>summary{color:#404044}
.cmused-page .cmused-case #problem+.cm-section{margin-top:56px}
@media(max-width:760px){.cmused-page .cmused-case #problem+.cm-section{margin-top:44px}}
/* Oct 20: one source line for the whole analysis instead of one under every chart. */
.cmused-page .cmused-case .cm-data-source{margin:36px 0 0;font:450 12px/1.5 var(--cm-text);color:#8a8a90}