/* Demos page ("What we can build for you"). Builds on styles.css tokens only:
   no new colours, hairlines not panels, hierarchy from scale not weight. */

.demo-try{
  display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 4);
  margin-top:calc(var(--u) * 6);
}
.demo-try[hidden]{display:none}
.demo-note{
  margin-top:calc(var(--u) * 4);max-width:56ch;
  font-size:14px;font-weight:200;line-height:1.55;color:var(--ash);
}

.demo-shots{
  display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--u) * 4);
  margin-top:calc(var(--u) * 6);
}
.demo-shot{margin:0}
.demo-shot img{
  width:100%;height:auto;border:1px solid var(--line);border-radius:6px;
}
.demo-shot figcaption{
  margin-top:calc(var(--u) * 2);
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
}

/* A call, laid out as a transcript. */
.call{
  display:grid;gap:calc(var(--u) * 3);
  margin-top:calc(var(--u) * 6);max-width:60ch;
  counter-reset:none;
}
.call li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:calc(var(--u) * 3);align-items:baseline}
.call .who{
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
}
.call .said{font-size:16px;font-weight:200;line-height:1.6;color:var(--silver)}
.call .c-caller .said{color:var(--bone)}
.call .c-sys{grid-template-columns:92px minmax(0,1fr)}
.call .c-sys .said{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  border-left:1px solid var(--accent);padding-left:12px;
}
.call-src{margin-top:calc(var(--u) * 5);font-size:14px;font-weight:200;color:var(--ash);max-width:56ch}

@media (max-width:560px){
  .call li,.call .c-sys{grid-template-columns:1fr;gap:4px}
}