/* ==========================================================
   keeplee - All modules: an index of big rows, each in its own
   colour, then what passes from one part to another.
   ========================================================== */
.mo-hero { padding: calc(60px + var(--under, 0px)) 0 60px; background: var(--bg-soft); text-align: center; }
.mo-copy { max-width: 820px; }
.mo-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.mo-icons .dd-ico { width: 44px; height: 44px; border-radius: 13px; }
.mo-hero h1 { margin: 0 0 16px; color: var(--navy); font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -.035em; }
.mo-hero h1 span { color: var(--brand); }
.mo-hero .lead { margin: 0 auto 28px; max-width: 34em; text-wrap: balance; }

.mo-index { padding: 32px 0 72px; background: #fff; }
.mo-rows { max-width: 1120px; margin: 0 auto; }
.mo-row { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 16px; align-items: center; padding: 22px 12px; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: background .25s var(--ease), padding .25s var(--ease); }
.mo-row h2 { margin: 0; color: inherit; font-size: clamp(1.5rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; transition: color .25s var(--ease); }
.mo-row p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
.mo-go { grid-row: 1; grid-column: 3; color: var(--muted); transition: transform .25s var(--ease), color .25s var(--ease); }
.mo-row:hover { background: color-mix(in srgb, var(--c) 7%, #fff); }
.mo-row:hover h2, .mo-row:hover .mo-go { color: var(--c); }
.mo-row:hover .mo-go { transform: translateX(6px); }
.mo-row:hover .mo-go .ico-off { display: none; } .mo-row:hover .mo-go .ico-on { display: block; }
@media (min-width: 860px) {
  .mo-row { grid-template-columns: 44px minmax(0, 5fr) minmax(0, 6fr) 32px; gap: 20px; padding: 26px 18px; }
  .mo-row p { grid-column: 3; margin: 0; }
  .mo-go { grid-column: 4; }
}

.mo-pass { padding: 76px 0; background: var(--navy); color: #cfccc2; }
.mo-pass-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.mo-pass h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; letter-spacing: -.025em; }
.mo-pass .lead { margin: 0; color: #cfccc2; text-wrap: balance; }
.mo-pass-list { list-style: none; display: grid; gap: 12px; max-width: 1040px; margin: 0 auto; padding: 0; }
.mo-pass-list li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px 10px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: rgba(255,255,255,.06); }
.mo-from, .mo-to { font-weight: 600; color: #fff; white-space: nowrap; }
.mo-to { justify-self: start; }
.mo-arrow { display: inline-flex; color: var(--accent); }
.mo-arrow .ico { width: 18px; height: 18px; }
.mo-pass-list p { grid-column: 1 / -1; margin: 0; line-height: 1.5; font-size: .96rem; }
@media (min-width: 860px) {
  .mo-pass-list li { grid-template-columns: 130px 22px 170px 1fr; gap: 12px; }
  .mo-from { text-align: right; }
  .mo-pass-list p { grid-column: 4; }
}
@media (prefers-reduced-motion: reduce) { .mo-row, .mo-go, .mo-row h2 { transition: none; } .mo-row:hover .mo-go { transform: none; } }