/* demos.css
   The demo hub and the one page per hosted demo. Every rule is scoped under
   body.demos-page so nothing can leak into another section.
   Tokens come from style.css and inner.css. Inter only.
   British English. No long dashes in this file. */

body.demos-page .phead-crumb{
  margin:1.1rem 0 0;
  font-size:.86rem;
  letter-spacing:.01em;
}
body.demos-page .phead-crumb a{
  color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:1px;
}
body.demos-page .phead-crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- at a glance ---------- */

body.demos-page .dm-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.7rem;
  margin:0 0 clamp(1.4rem,3vw,2.1rem);
}
body.demos-page .dm-facts > div{
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r-sm);
  padding:.95rem 1.05rem;
}
body.demos-page .dm-facts dt{
  margin:0 0 .3rem;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--i-ink-3);
}
body.demos-page .dm-facts dd{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--i-ink);
}

/* ---------- what it shows ---------- */

body.demos-page .dm-blocks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(.9rem,2.2vw,1.35rem);
}
body.demos-page .dm-block{
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r);
  padding:clamp(1.1rem,2.4vw,1.5rem);
}
body.demos-page .dm-block .n{
  display:inline-block;
  margin-bottom:.6rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--i-accent-text);
}
body.demos-page .dm-block h3{
  margin:0 0 .5rem;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--i-ink);
}
body.demos-page .dm-block p{
  margin:0;
  font-size:.93rem;
  line-height:1.6;
  color:var(--i-ink-2);
}

body.demos-page .dm-sub{
  margin:clamp(1.6rem,3.4vw,2.3rem) 0 .8rem;
  font-size:1.02rem;
  font-weight:700;
  color:var(--i-ink);
}
body.demos-page .dm-areas{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
body.demos-page .dm-areas li{
  padding:.4rem .78rem;
  border-radius:999px;
  border:1px solid var(--i-hair);
  background:var(--ground-2);
  font-size:.87rem;
  font-weight:600;
  color:var(--i-ink-2);
}

/* ---------- the screenshot pair ---------- */

body.demos-page .dm-shots{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,260px);
  align-items:start;
  gap:clamp(1rem,2.6vw,1.8rem);
  margin-bottom:clamp(1.4rem,3vw,2rem);
}
body.demos-page .dm-shot{
  margin:0;
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r);
  overflow:hidden;
}
body.demos-page .dm-shot img{
  display:block;
  width:100%;
  height:auto;
  border-top:1px solid var(--i-hair-soft);
}
body.demos-page .dm-shot-tall img{border-top:0}
body.demos-page .dm-shot figcaption{
  padding:.6rem .95rem .75rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--i-ink-3);
}
body.demos-page .dm-shot .shot-bar span{max-width:none}

body.demos-page .dm-note{
  margin:1.2rem 0 0;
  max-width:68ch;
  font-size:.9rem;
  line-height:1.6;
  color:var(--i-ink-3);
}

/* ---------- the offer block ---------- */

body.demos-page .dm-offer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(.85rem,2vw,1.15rem);
}
body.demos-page .dm-card{
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r-sm);
  padding:clamp(1rem,2.2vw,1.35rem);
}
body.demos-page .dm-card h3{
  margin:0 0 .45rem;
  font-size:1rem;
  font-weight:700;
  color:var(--i-ink);
}
body.demos-page .dm-card p{
  margin:0;
  font-size:.92rem;
  line-height:1.55;
  color:var(--i-ink-2);
}

/* ---------- the hub ---------- */

body.demos-page .dm-trade{margin-bottom:clamp(2rem,4.5vw,3.2rem)}
body.demos-page .dm-trade:last-of-type{margin-bottom:0}
body.demos-page .dm-trade h2{
  margin:0 0 .3rem;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--i-ink);
}
body.demos-page .dm-trade > .micro{margin:0 0 1.05rem}

body.demos-page .dm-tiles{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:clamp(.9rem,2.2vw,1.35rem);
}
body.demos-page .dm-tile{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--card);
  border:1px solid var(--i-hair);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
body.demos-page .dm-tile:hover{border-color:rgba(24,24,24,.24);transform:translateY(-2px)}
body.demos-page .dm-tile img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1440 / 900;
  object-fit:cover;
  object-position:top center;
  border-bottom:1px solid var(--i-hair-soft);
}
body.demos-page .dm-tile-text{
  padding:clamp(1rem,2.2vw,1.3rem);
  display:flex;
  flex-direction:column;
  flex:1;
}
body.demos-page .dm-tile-text .kicker{margin:0 0 .4rem}
body.demos-page .dm-tile-text h3{
  margin:0 0 .45rem;
  font-size:1.12rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--i-ink);
}
body.demos-page .dm-tile-text p{
  margin:0;
  font-size:.91rem;
  line-height:1.55;
  color:var(--i-ink-2);
}
body.demos-page .dm-tile-go{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  margin-top:auto;
  padding-top:.95rem;
  font-weight:700;
  font-size:.9rem;
  color:var(--i-accent-text);
}
body.demos-page .dm-tile-go svg{transition:transform .2s var(--ease)}
body.demos-page .dm-tile:hover .dm-tile-go svg{transform:translateX(3px)}

@media (max-width:860px){
  body.demos-page .dm-shots{grid-template-columns:1fr}
  body.demos-page .dm-shot-tall{max-width:300px}
}

@media (prefers-reduced-motion:reduce){
  body.demos-page .dm-tile,
  body.demos-page .dm-tile-go svg{transition:none;transform:none}
}

/* breathing room between the section head and the first trade group */
body.demos-page .sec-head + .dm-trade{margin-top:clamp(1.6rem,3.4vw,2.4rem)}