.scenario-grid { display: grid; gap: 24px; align-items: start; }
.scenario-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; scroll-margin-top: 24px; }
.scenario-card figure { margin: 8px 8px 0; border-radius: 18px; overflow: hidden; }
.scenario-card img { aspect-ratio: 1.5; }
.card-tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; background: var(--paper); border-radius: 20px; font-size: 12px; }
.scenario-content { padding: 24px; }
.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.card-title > span { font-size: 12px; color: var(--muted); }
.card-title h3 { font-size: 24px; }
.scenario-content > p { color: var(--muted); font-size: 15px; margin-top: 14px; }
.scenario-card details { margin-top: 22px; border-top: 1px solid var(--line); }
.scenario-card summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; min-height: 60px; padding-top: 10px; }
.scenario-card summary > span { display: grid; place-items: center; font-size: 23px; width: 30px; height: 30px; background: var(--stone); border-radius: 50%; }
.scenario-card summary:hover { color: var(--accent-ink); }
.criteria li { position: relative; padding: 9px 0 9px 17px; font-size: 14px; color: var(--muted); }
.criteria li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-ink); position: absolute; left: 0; top: 19px; }
.scenario-details .text-link { margin-top: 12px; }
.scenario-details .small { margin-top: 12px; }
.sell-strip { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-radius: 18px; padding: 24px; background: var(--stone); }
.sell-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--line); border-radius: 50%; font-size: 25px; }
.sell-strip h3 { font-size: 19px; }
.sell-strip p { font-size: 14px; color: var(--muted); margin-top: 6px; }
.sell-strip > div { flex: 1 1 230px; }
.sell-strip .text-link { font-size: 14px; }
@media (min-width: 1000px) {
  .scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scenario-content > p { min-height: 75px; }
  .sell-strip { padding: 24px 30px; gap: 24px; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .scenario-card { display: grid; grid-template-columns: .9fr 1fr; }
  .scenario-card figure { margin: 8px; }
  .scenario-card picture, .scenario-card img { height: 100%; min-height: 270px; }
  .scenario-content { padding: 24px 24px 16px 16px; }
}
.deck-dots { display: none; }
/* Phone: the three directions form a swipeable fan with the next card peeking out. */
@media (max-width: 599px) {
  .scenario-grid { grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; margin-inline: -20px; padding: 2px 20px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  .scenario-grid::-webkit-scrollbar { display: none; }
  .scenario-card { scroll-snap-align: start; scroll-snap-stop: always; }
  .scenario-card img { aspect-ratio: 1.25; }
  .deck-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .deck-dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--chip-line); transition: width 220ms ease, background-color 220ms ease; }
  .deck-dots span[data-active] { width: 24px; background: var(--ink); }
}
@media (max-width: 374px) {
  .scenario-grid { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}