/* Ops layout uses the shared palette, type and long-form components. */
.ops-page .wrap { max-width: 1140px; }
.ops-hero { padding: clamp(48px, 8vw, 100px) 0 48px; }
.ops-hero h1 { max-width: 16ch; font-size: clamp(44px, 7.5vw, 86px); }
.ops-hero .sub { max-width: 52ch; }
.ops-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ops-flow { border-top: 1px solid var(--rule); padding-top: 28px; }
.ops-flow h2 { font-size: 20px; }
.ops-flow ol { list-style: none; counter-reset: flow; display: grid; grid-template-columns: repeat(6, 1fr); padding: 0; margin: 28px 0 0; gap: 14px; }
.ops-flow li { counter-increment: flow; border-top: 2px solid var(--accent); padding-top: 14px; font-size: 14px; font-weight: 600; }
.ops-flow li::before { content: "0" counter(flow); display: block; color: var(--accent-text); margin-bottom: 8px; font-size: 12px; }
.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.ops-card { padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.ops-number { color: var(--accent-text); font-size: 12px; font-weight: 600; }
.ops-card h3, .ops-phone h3 { font-size: 20px; margin: 18px 0 10px; line-height: 1.35; }
.ops-card p, .ops-phone p { color: var(--body); margin: 0; }
.ops-trades ul { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; padding: 0; margin: 24px 0 0; color: var(--body); }
.ops-phone { margin-top: 72px; padding: 56px 0; }
.ops-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ops-phone h2 { margin-bottom: 24px; }
.ops-phone-steps { margin: 0; padding-left: 24px; }
.ops-phone-steps li { padding: 0 0 20px 12px; }
.ops-phone-steps h3 { margin-top: 0; }
.ops-account .prose p:first-child { margin-top: 0; }
.ops-page a:focus-visible, .ops-page summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 5px; }
@media (max-width: 760px) {
 .ops-flow ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; }
 .ops-split, .ops-grid { grid-template-columns: 1fr; gap: 20px; }
 .ops-card { padding: 24px; }
 .ops-phone { margin-top: 48px; }
}
/* Real app screens and the explainer video. */
.ops-watch { margin-top: 72px; }
.ops-shot { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.ops-shot img, .ops-shot video { display: block; width: 100%; height: auto; }
.ops-shot figcaption { padding: 14px 18px; font-size: 14px; color: var(--body); }
.ops-shot figcaption b { color: var(--ink); }
.ops-video { margin-top: 24px; }
.ops-tour { margin-top: 72px; }
.ops-tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.ops-tour-grid .ops-shot:first-child, .ops-tour-grid .ops-shot:last-child { grid-column: 1 / -1; }
.ops-snap { margin-top: 72px; align-items: start; }
.ops-snap-shot { max-width: 380px; justify-self: center; }
.ops-steps { margin: 24px 0 0; padding-left: 24px; }
.ops-steps li { padding: 0 0 16px 12px; }
.ops-steps h3 { font-size: 18px; margin: 0 0 6px; }
.ops-steps p { color: var(--body); margin: 0; }
.ops-phone-shot { max-width: 260px; margin-top: 28px; }
@media (max-width: 760px) {
 .ops-tour-grid { grid-template-columns: 1fr; }
 .ops-watch, .ops-tour, .ops-snap { margin-top: 48px; }
}