/* /offline-programming: screens from the OLP app (captured at 1600 × 1000 CSS px) in their light and dark themes.
   Screen frames and the theme swap come from rosie-pendant.css. */
.olp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem) 0; }
.olp-hero .hero-lede { max-width: 34rem; }
.olp-hero-shot { margin: 0; }

.olp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2vw, 2rem); }
.olp-steps li { display: grid; gap: .6rem; align-content: start; border-top: 2px solid var(--ink); padding-top: .9rem; }
.olp-steps h3 { font-size: 1.1rem; }
.olp-steps p { font-size: .92rem; color: var(--ink-2); }

.olp-feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.olp-feature + .olp-feature { margin-top: clamp(2.5rem, 5vw, 4rem); }
.olp-feature-flip > .olp-feature-copy { order: 2; }
.olp-feature-copy { display: grid; gap: 1rem; align-content: start; }
.olp-feature-copy p { color: var(--ink-2); }
.olp-feature-copy h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.olp-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; color: var(--ink-2); font-size: .95rem; }

#pendant .deck-figure { margin-top: 1rem; margin-bottom: 0; }

/* Any task: /rosie's process drawings (static, from rosie-tasks.css), three across */
.olp-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 1100px) { .olp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .olp-hero, .olp-feature { grid-template-columns: minmax(0, 1fr); }
  .olp-feature-flip > .olp-feature-copy { order: 0; }
}
@media (max-width: 900px) { .olp-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .olp-steps, .olp-tasks { grid-template-columns: minmax(0, 1fr); } }