/* AutoROC page — on top of scm-page + pp-page + mfg-page + dms-page + frame + light + mono + turquoise. */
.roc-hero-shot { display: block; width: 100%; height: auto; }
.roc-shot { position: relative; background: #f4f6fb; overflow: hidden; }
.roc-shot img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; object-position: left top; }
.roc-shot img.is-in { animation: roc-in 0.45s ease both; }
@keyframes roc-in { from { opacity: 0.2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.roc-cap { margin: 0; padding: 12px 16px; background: #fff; border-top: 1px solid #e3ecee; font-size: 14px; line-height: 1.5; color: #55605f; }
.roc-forms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #dfe8ea; border: 1px solid #dfe8ea; }
.roc-forms li { background: #fff; padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.roc-forms b { font: 600 14px/1 "IBM Plex Mono", monospace; color: #0b8fa8; }
.roc-forms span { font-size: 15px; line-height: 1.4; color: #2f3a3d; }
.roc-forms small { font-size: 12.5px; line-height: 1.45; color: #7b8a8c; }
.roc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.roc-modes > div { background: #fff; border: 1px solid #dfe8ea; border-top: 3px solid #0b8fa8; padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.roc-modes small { font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #0b8fa8; }
.roc-modes h3 { margin: 0; font: 500 22px/1.2 "Newsreader", Georgia, serif; color: #2f3a3d; }
.roc-modes p { margin: 0; font-size: 15px; line-height: 1.55; color: #55605f; }
.roc-note { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid #b42318; background: #fbf3f2; font-size: 14px; line-height: 1.5; color: #2f3a3d; }
@media (max-width: 960px) { .roc-forms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .roc-forms, .roc-modes { grid-template-columns: 1fr; } }