/* Pop Street Dispatch page: problem and answer pairs, the one-call story, the read-only strip and the plan comparison.
   The story is a numbered list with a screenshot under each step. dispatch-story.js adds .is-linked on wide screens and the sticky frame takes over. */
.dd-note { margin: 1em 0 0; font-size: .92rem; color: var(--ink-mute); max-width: 40em; }
.dd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px 24px; margin-top: 18px; }

.dd-story { padding: clamp(32px, 5vw, 64px) 0; background: linear-gradient(180deg, var(--cream-50), var(--cream)); }
.dd-grid { display: grid; gap: clamp(20px, 3vw, 40px); margin-top: 24px; }
.dd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2em; }
.dd-step { display: flex; gap: 14px; padding-left: 14px; border-left: 3px solid var(--greige); transition: border-color .4s var(--ease), opacity .4s var(--ease); }
.dd-step__n { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--sage-800); color: var(--cream-50); font: 600 .9rem/1.9em var(--sans); text-align: center; }
.dd-step__h { font: 600 clamp(1.1rem, 1rem + .6vw, 1.4rem)/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 .3em; text-wrap: balance; }
.dd-step p { margin: 0 0 .8em; color: var(--ink-soft); max-width: 34em; line-height: 1.55; }
.dd-step__saves { color: var(--ink); }
.dd-step__fig { margin: 1em 0 0; }
.dd-stage { display: none; }

@media (min-width: 900px) {
  .dd-story.is-linked .dd-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .dd-story.is-linked .dd-steps { gap: 0; }
  .dd-story.is-linked .dd-step { min-height: 62svh; align-content: center; align-items: center; opacity: .45; }
  .dd-story.is-linked .dd-step__fig { display: none; }
  .dd-story.is-linked .dd-stage { display: block; position: sticky; top: 96px; height: min(70svh, 620px); }
  .dd-stage__shot { position: absolute; inset: 0 0 44px; display: grid; align-items: start; opacity: 0; transition: opacity .5s var(--ease); }
  .dd-stage__shot .pr-frame { width: 100%; max-height: 100%; }
  .dd-stage__shot .pr-frame--phone { width: auto; height: 100%; max-width: none; }
  .dd-stage__shot .pr-frame--phone .shot { height: calc(100% - 26px); width: auto; max-width: 100%; }
  .dd-rail { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font: 600 .78rem/1 var(--sans); }
  .dd-rail span { padding: .45em .8em; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-mute); transition: background .4s var(--ease), color .4s var(--ease); }
  .dd-story.is-linked[data-scene="1"] [data-step="1"], .dd-story.is-linked[data-scene="2"] [data-step="2"], .dd-story.is-linked[data-scene="3"] [data-step="3"],
  .dd-story.is-linked[data-scene="4"] [data-step="4"], .dd-story.is-linked[data-scene="5"] [data-step="5"] { opacity: 1; border-left-color: var(--sage); }
  .dd-story.is-linked[data-scene="1"] [data-shot="1"], .dd-story.is-linked[data-scene="2"] [data-shot="2"], .dd-story.is-linked[data-scene="3"] [data-shot="3"],
  .dd-story.is-linked[data-scene="4"] [data-shot="4"], .dd-story.is-linked[data-scene="5"] [data-shot="5"] { opacity: 1; }
  .dd-story.is-linked[data-scene="1"] [data-rail="1"], .dd-story.is-linked[data-scene="2"] [data-rail="2"], .dd-story.is-linked[data-scene="3"] [data-rail="3"],
  .dd-story.is-linked[data-scene="4"] [data-rail="4"], .dd-story.is-linked[data-scene="5"] [data-rail="5"] { background: var(--sage-800); color: var(--cream-50); border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .dd-step, .dd-stage__shot, .dd-rail span { transition: none; } }

.dd-ro { background: none; }