/* "The problem, then the fix" sections: a visitor's pain point stated in their own words, followed by a
   numbered path of real app screenshots with arrows between the steps. Inserted by
   scripts/screenshots/place-app-images.js. Uses the v3 editorial tokens (--li-*) with fallbacks. */
.lp-fixpath .lp-prose { max-width: none; }
.lp-fixpath .lp-prose > ol.fp-path, .lp-fixpath .lp-prose > p.fp-result { max-width: none; }
.lp-fixpath .fp-step::before { content: none !important; display: none !important; }
.lp-fixpath .fp-step { padding-left: 0; counter-increment: none; }
.lp-fixpath .lp-prose > p:not(.fp-result):not(.fp-problem) { max-width: 70ch; }
.lp-fixpath .fp-problem { max-width: 70ch; margin: 0 0 22px; padding: 16px 20px; border: 1px solid var(--li-ink, #101214); border-left: 6px solid var(--li-accent, #c8321b); background: var(--li-panel, #fffdf7); font-size: 1.05rem; line-height: 1.55; }
.lp-fixpath .fp-problem strong { font-family: var(--li-mono, Consolas, monospace); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--li-accent, #c8321b); display: block; margin-bottom: 4px; }
.lp-fixpath .fp-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; grid-template-columns: repeat(var(--fp-cols, 3), minmax(0, 1fr)); counter-reset: none; }
.lp-fixpath .fp-step { position: relative; margin: 0; padding: 0; background: var(--li-panel, #fffdf7); border: 1px solid var(--li-ink, #101214); }
.lp-fixpath .fp-step::after { content: ""; position: absolute; top: 34%; right: -29px; width: 24px; height: 24px; background: var(--li-ink, #101214); clip-path: polygon(0 28%, 58% 28%, 58% 0, 100% 50%, 58% 100%, 58% 72%, 0 72%); }
.lp-fixpath .fp-step:last-child::after { display: none; }
.lp-fixpath .fp-step a { display: block; line-height: 0; border-bottom: 1px solid var(--li-ink, #101214); }
.lp-fixpath .fp-step img { display: block; width: 100%; height: auto; margin: 0; background: #1d4ed8; }
.lp-fixpath .fp-cap { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 16px; font-size: .93rem; line-height: 1.5; color: var(--li-muted, #67655f); }
.lp-fixpath .fp-cap strong { display: block; margin-bottom: 3px; color: var(--li-ink, #101214); }
.lp-fixpath .fp-n { flex: 0 0 auto; width: 30px; height: 30px; background: var(--li-ink, #101214); color: var(--li-panel, #fffdf7); font-family: var(--li-mono, Consolas, monospace); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lp-fixpath .fp-result { margin: 26px 0 0; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; border: 1px solid var(--li-ink, #101214); background: #e8f3ec; font-size: 1.02rem; line-height: 1.5; }
.lp-fixpath .fp-result strong { font-family: var(--li-mono, Consolas, monospace); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #1c6b3b; margin-right: 8px; }
.lp-fixpath .fp-result a { flex: 0 0 auto; padding: 10px 18px; background: var(--li-ink, #101214); color: var(--li-panel, #fffdf7); text-decoration: none; font-weight: 700; }
@media (max-width: 900px) {
  .lp-fixpath .fp-path { grid-template-columns: 1fr; gap: 38px; }
  .lp-fixpath .fp-step::after { top: auto; bottom: -33px; right: auto; left: 50%; margin-left: -12px; transform: rotate(90deg); }
}