.sc { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.sc::-webkit-scrollbar { display: none; }
.mock-h { display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 clamp(20px, 4cqw, 48px); font-size: 13px; font-weight: 500; }
.mock-h b { font-size: 17px; font-weight: 550; letter-spacing: -0.022em; margin-right: auto; }
.mock-hero { padding: 60px clamp(20px, 4cqw, 48px) 40px; }
.mock-hero h3 { margin: 0; font-size: clamp(40px, 7cqw, 86px); line-height: .94; letter-spacing: -0.022em; font-weight: 550; max-width: 11ch; }
.mock-hero p { margin: 18px 0 0; max-width: 42ch; font-size: 17px; opacity: .7; }
.mock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 clamp(20px, 4cqw, 48px) 60px; }
.mock-grid i { display: block; height: 220px; border-radius: 12px; }
@container (max-width: 700px) { .mock-grid { grid-template-columns: 1fr 1fr; } .mock-grid i:nth-child(3) { display: none; } .mock-h span { display: none; } }

/* ── F13. The harp ───────────────────────────────────── */
.f13 { height: 600px; background: var(--gray-60); color: var(--gray-830); }
.f13 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.f13-top { position: absolute; left: clamp(20px, 4cqw, 48px); right: clamp(20px, 4cqw, 48px); top: 30px; display: flex; align-items: center; gap: 16px; }
.f13-top h4 { margin: 0; font-size: clamp(24px, 4cqw, 40px); letter-spacing: -0.022em; font-weight: 550; }
.f13-snd { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--gray-830) 20%, transparent); background: none; border-radius: 9999px; padding: 7px 14px; font: 550 13px var(--font); color: var(--gray-830); cursor: default; }
.f13-snd[aria-pressed="true"] { background: var(--gray-830); color: var(--gray-60); }
.f13-snd svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f13-lab { position: absolute; left: clamp(20px, 4cqw, 48px); transform: translateY(-50%); font-size: 15px; font-weight: 550; color: var(--gray-830); text-decoration: none; transition: opacity .2s, transform .3s cubic-bezier(.2,.9,.25,1); }
.f13-lab small { display: block; font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--gray-830) 50%, transparent); }
.f13-bot { position: absolute; left: clamp(20px, 4cqw, 48px); right: clamp(20px, 4cqw, 48px); bottom: 18px; display: flex; justify-content: space-between; font-size: 12px; color: color-mix(in srgb, var(--gray-830) 50%, transparent); pointer-events: none; }