/*
 * Shop and backpack proposals: the page around the mocks (pitch card, demo bar, section heads).
 * Page chrome (bar, intro, design tabs, footer) is ../fountains/page.css. The mocks' structure and
 * the chosen Collector's Catalogue design are ../shared/shop.css, the same file the game uses; the
 * other four designs restyle .m--<id> in themes/<id>.css.
 */

/* ---------------------------------------------------------------- page */
.pitch {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin: 0 0 14px; padding: 18px 20px;
  border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(38, 52, 69, 0.08), inset 0 0 0 2px rgba(38, 52, 69, 0.06);
}
.pitch__num {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--dark-navy); color: var(--primary-yellow);
  border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); font: 400 26px/1 var(--title-font); text-align: center;
}
.pitch__num small { display: block; font: 700 8px/1 var(--body-font); letter-spacing: 1.5px; color: #fff; margin-bottom: 2px; }
.pitch__name { margin: 0; font: 400 clamp(24px, 3vw, 32px)/1.05 var(--title-font); color: var(--primary-color); text-transform: uppercase; text-wrap: balance; }
.pitch__idea { margin: 6px 0; font: 600 16px/1.45 var(--body-font); color: var(--dark-navy); }
.pitch__why { margin: 0 0 10px; max-width: 82ch; font-size: 14px; line-height: 1.55; color: var(--badge-color); }
.pitch__like { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pitch__like span { padding: 4px 10px; border-radius: 999px; background: var(--soft-peach); font: 600 12px/1.2 var(--body-font); }

.demo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 22px; padding: 10px 12px; border-radius: 14px;
  background: var(--soft-cream); box-shadow: inset 0 0 0 2px rgba(38, 52, 69, 0.08);
}
.demo__group, .demo__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.demo__label { margin-right: 2px; font: 700 11px/1 var(--body-font); letter-spacing: 1.4px; text-transform: uppercase; color: var(--secondary-color); }
.demo .tool { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.demo .tool small { font-weight: 600; opacity: 0.7; }
.demo__reset { margin-left: auto; }

.mockup { margin: 0 0 30px; }
.mockup__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font: 400 26px/1.1 var(--heading-font); color: var(--dark-navy); letter-spacing: 0.3px; }
.mockup__h small { font: 500 14px/1.3 var(--body-font); color: var(--badge-color); letter-spacing: 0; }

@media (max-width: 640px) {
  .pitch { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pitch__num { width: 56px; height: 56px; font-size: 20px; }
  .demo__reset { margin-left: 0; }
}