.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; } }

/* ── F14. Liquid wordmark ────────────────────────────── */
.f14 { height: 560px; background: var(--gray-890); color: var(--gray-50); cursor: crosshair; }
.f14 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.f14-row { position: absolute; left: clamp(20px, 4cqw, 48px); right: clamp(20px, 4cqw, 48px); display: flex; gap: 24px; font-size: 13px; color: color-mix(in srgb, var(--gray-50) 55%, transparent); pointer-events: none; }
.f14-row.t { top: 26px; } .f14-row.b { bottom: 24px; }
.f14-row span:last-child { margin-left: auto; }