/* ── 20. Overview of the whole site ──────────────────── */
.s20 { height: 640px; background: var(--gray-850); }
.mc-p { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; cursor: default; will-change: transform; }
.mc-p.pick { cursor: default; }
.mc-in { width: 100%; height: 100%; position: relative; }
.mc-h { display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 28px; font-size: 13px; font-weight: 500; }
.mc-lg { font-size: 20px; font-weight: 550; letter-spacing: -0.022em; margin-right: 8px; }
.mc-h a { opacity: .6; cursor: default; }
.mc-h a.on { opacity: 1; }
.mc-ov { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid currentColor; border-radius: 9999px; padding: 7px 13px; font-size: 13px; font-weight: 550; background: none; color: inherit; cursor: default; opacity: .85; }
.mc-ov svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.mc-hero { padding: 60px 28px 0; }
.mc-hero h3 { margin: 0; font-size: clamp(40px, 7cqw, 84px); line-height: .95; letter-spacing: -0.022em; font-weight: 550; max-width: 11ch; }
.mc-hero p { margin: 18px 0 0; font-size: 17px; opacity: .7; max-width: 40ch; }
.mc-blk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 40px 28px 0; }
.mc-blk i { height: 150px; border-radius: 12px; }
.mc-lab { position: absolute; left: 0; top: 0; z-index: 20; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--gray-0) 70%, transparent); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-50%); }
.mc-lab.cur { color: var(--gray-0); }
.mc-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: color-mix(in srgb, var(--gray-0) 45%, transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.s20.ov .mc-hint { opacity: 1; transition-delay: .3s; }