/* One URL instead of eleven files — page composition on Amaca 6.0.0.
   Local classes carry the mc- prefix (a declared composition). Every value is a token. */

body{background:var(--obsidian-950)}
.mc-page{
  max-width:calc(var(--s-32) * 8);
  margin:0 auto;
  padding:calc(var(--s-24) + var(--s-4)) var(--s-4) var(--s-24);
  --float-top:var(--s-24);
}
@media(max-width:720px){
  .mc-page{padding:calc(var(--s-24) + var(--s-4)) var(--s-4) var(--s-16);--float-top:calc(var(--s-20) + var(--s-2))}
  .mc-page .cs-hero{padding:var(--s-16) var(--s-5) var(--s-10)}
}

/* Figures made of HTML (tables, chart cards, scan outputs): the figure frame of the template, without the Lightbox. */
.mc-panel{
  padding:var(--s-6);
  background:var(--obsidian-900);
  border:var(--bw-1) solid var(--obsidian-800);
  border-radius:var(--r-lg);
  font-size:var(--t-small);
  line-height:var(--lh-normal);
}
.mc-panel > * + *{margin-top:var(--s-4)}
.mc-panel .table{width:100%;margin:0}
.mc-panel .table td.num,.mc-panel .table th.num{text-align:right;font-variant-numeric:tabular-nums}
.mc-panel .table tr.mc-row-hl td{color:var(--primary-300);font-weight:500}
.mc-panel-head{
  max-width:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  margin:0;
  font-family:var(--font-sans);font-size:var(--t-caption);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--obsidian-300);
}
.mc-panel-head strong{font-weight:500;color:var(--obsidian-100)}

/* Two outputs side by side: before on the left, after on the right; stacked on a phone. */
.mc-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
@media(max-width:720px){.mc-compare{grid-template-columns:minmax(0,1fr)}}

/* Verbatim output: the system has no monospaced face, code reads in the label register. */
.mc-code{
  margin:0;
  padding:var(--s-4);
  background:var(--obsidian-950);
  border:var(--bw-1) solid var(--obsidian-800);
  border-radius:var(--r-md);
  font-family:var(--font-sans);font-size:var(--t-caption);letter-spacing:var(--tr-label);line-height:var(--lh-normal);
  color:var(--obsidian-200);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.mc-code .ok{color:var(--success)}
.mc-code .err{color:var(--danger)}
.mc-code .tok{color:var(--primary-300)}

/* The one URL, set apart under the table of files. */
.mc-url{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  padding:var(--s-4);
  border:var(--bw-1) solid var(--primary-500);
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--primary-500) calc(var(--tint-fill) * 100%), transparent);
}
.mc-url .k{font-family:var(--font-sans);font-size:var(--t-caption);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--primary-300)}
.mc-url .v{font-size:var(--t-body);font-weight:500;color:var(--obsidian-050);overflow-wrap:anywhere}

/* Chart card inside the reading column reads at the body size, as the Outcome stats do. */
.cs-section-body .chart-card{font-size:var(--t-body);line-height:var(--lh-normal)}
.cs-section-body .cs-stats{margin-top:var(--s-8)}
.cs-section-body .cs-stats:first-child{margin-top:0}
@media(max-width:480px){.cs-stats{grid-template-columns:minmax(0,1fr) !important}}

/* More cases: the card text stays the template's; the grid sits on the page width. */
.cs-more{margin-top:var(--s-16)}

/* Closing list of sources. */
.mc-sources{padding-left:var(--s-5)}
.mc-sources li + li{margin-top:var(--s-2)}
.mc-sources,.mc-sources li{font-size:var(--t-body);line-height:var(--lh-normal);color:var(--obsidian-200)}

/* Section entrance (Case study motion): eyebrow, title, body rise --s-6 and fade, --d-instant apart. */
.mc-js .cs-section > :is(.eyebrow,.cs-section-title,.cs-section-body),
.mc-js .cs-pull{opacity:0;transform:translateY(var(--s-6))}
.mc-js .cs-section.is-in > :is(.eyebrow,.cs-section-title,.cs-section-body),
.mc-js .cs-pull.is-in{
  opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--ease-decel), transform var(--d-slow) var(--ease-decel);
}
.mc-js .cs-section.is-in > .cs-section-title{transition-delay:var(--d-instant)}
.mc-js .cs-section.is-in > .cs-section-body{transition-delay:calc(var(--d-instant) * 2)}

@media (prefers-reduced-motion: reduce){
  .mc-js .cs-section > :is(.eyebrow,.cs-section-title,.cs-section-body),
  .mc-js .cs-pull{opacity:1;transform:none;transition:none}
}

/* The translation under a quote in another language. */
.mc-gloss{max-width:calc(var(--t-h6) * 36);margin:calc(var(--s-4) * -1) auto var(--s-12);padding:0 var(--s-6)}
.mc-gloss p{color:var(--obsidian-300)}

/* A screenshot of the real site, framed like the figures made of HTML. */
.mc-shot{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:var(--bw-1) solid var(--obsidian-800)}

/* Eleven bundles converging on one URL. Labels stay HTML; the lines stretch with the list. */
.mc-converge{display:grid;grid-template-columns:max-content minmax(var(--s-12),1fr) minmax(0,max-content);align-items:center}
.mc-converge-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:minmax(0,1fr);gap:var(--s-1)}
.mc-converge-list li{font-size:var(--t-small);color:var(--obsidian-200);line-height:var(--lh-snug);padding:var(--s-1) 0}
.mc-converge svg{display:block;width:100%;height:100%;align-self:stretch}
.mc-converge path{fill:none;stroke:var(--obsidian-600);stroke-width:var(--bw-1);vector-effect:non-scaling-stroke}
.mc-converge path.mc-trunk{stroke:var(--primary-500);stroke-width:var(--bw-2)}
@media(max-width:720px){
  .mc-converge{grid-template-columns:minmax(0,1fr)}
  .mc-converge svg{display:none}
  .mc-converge-list{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:var(--s-4)}
}